Html 如何将底部部分移动到其他标题和段落的右侧

我试图移动Uni部分，使其位于其他段落和标题的一侧。我试着向左浮动，但它似乎不动。

任何帮助都会很好

<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>

---

您正在浮动.uni，但它在之后。了解更多信息，以便它只浮动在.uni之后的元素

此外，uni将尝试占据整个宽度，因此您需要约束宽度，以便为其他部分留出空间，使其浮动在其旁边

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

.learn-more{
    float:right;
}

这会让它对你有用。然后，根据您是否需要响应，您可以将宽度更改为百分比。您也可以通过在html中首先使用.uni并将其向左浮动来实现同样的效果。而不是漂浮。正确地学习更多

请看这里的小提琴。（如果您将窗口调整为小尺寸，请不要打开。uni将再次弹出到底部

---

这里有两个问题：

您的.uni

div

位于内部。了解更多信息

div

，因此它无法移动到右侧。您需要将其移动到外部。了解更多信息

div

，因此它是容器的子容器

您的宽度限制不允许在右侧有很多空间。了解更多信息

div

。我通过将宽度限制为150px，成功地使.uni

div

合适，但您可能希望重新调整东西，使其看起来更漂亮一点。（根据浏览器窗口和显示器的宽度，您可能需要重新调整大小以使.uni

div

向右移动。）

---

将它之前的所有内容放在另一个div容器中，并将该容器向右浮动。从

.uni

中移除浮动。

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

.learn-more{
    float:right;
}