html - 我如何将底部移到其他标题和段落的右侧

我正在尝试移动Uni部分，使其位于其他段落和标题的一侧。我试过向左浮动，但似乎没有动。
http://jsfiddle.net/loopy333/0sz6kt0a/2/

任何帮助都会很棒

<div  class ="container">
<div id="education" class ="learn-more">
    <h2>Education</h2>
    <h3>2003 - 2008 Haslingden High school</h3>

<p>9 GCSEs
    Grades B - C</p>

<h3>2008 - 2010 Haslingden High School sixth form </h3>
<p>3 A levels   IT  (B)</p>
<p>Level 3 BTEC National Award in Applied science (Forensic science (Pass)</p>
<p>level 3 BTEC National Award in Media production (print-based media)  (Distinction)</p>

<div class="uni">
<h3>2010 - 2013     Bachelor of Science in Engineering and Multimedia Computing 2:2
        Manchester Metropolitan University</h3>

<p>BSE Course subjects Studied
Introduction to Programming, Object Oriented Programming 1,2 ,3 & 4, Algorithms, Structured Analysis and Design, Object Oriented Analysis and Design
Computer Architecture, Operating Systems
Network Fundamentals, Routing Concepts and Protocols, Local Area Networks (LAN) Switching and Wireless, Wide Area Networks (WAN) Services and Security
Database Concepts, Introduction to Database Programming
Visual Communications, Web Design, Digital Imaging, Web Design for Multiple Platforms, Human Computer Interaction.
Multimedia Design & Development, Computer Graphics, Animation in 2D& 3D, Digital Audio, Digital Video Production
Interactive Web Media.
</p>
</div>

</div>

</div>

CSS：

.learn-more {
  background-color: #f7f7f7;

clear: both;
overflow:auto;
}

.learn-more .uni {
float:left;
}

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto; }

  @media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
  @media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
  @media (min-width: 1200px) {
 .container {
    width: 1170px;
  }
}

最佳答案

您正在浮动.uni，但是它在.learn之后，因此它只会浮动.uni之后的元素

此外，.uni会尝试占用整个宽度，因此您需要限制宽度，以便腾出空间让另一部分在其旁边浮动。

.uni{
    width: 200px;
    float: left;
}

.learn-more{
    float:right;
}

这应该使它为您工作。然后，根据您是否希望其响应速度，可以将宽度更改为百分比。您也可以通过在HTML中首先使用.uni并将其浮动向左来实现相同的目的。而不是浮动.learn-more权利。

看到这里的小提琴。 （如果您将窗口的大小设置为小，请不要这样做。uni会再次弹出到底部。

http://jsfiddle.net/uhwwrh3u/