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

Question

我正在尝试移动 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;
  }
}

Answer 1

你正在 float .uni 但它在 .learn-more 之后所以它只会 float .uni 之后的元素

此外，.uni 会尝试占据整个宽度，因此您需要限制宽度，以便为其他部分腾出空间 float 在它旁边。

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

.learn-more{
    float:right;
}

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

请在此处查看 fiddle 。 (如果您将窗口调整为小，请不要这样做。uni 会再次弹出到底部。

http://jsfiddle.net/uhwwrh3u/