我如何移動底部部分坐在其他標題和段落的右側

我試圖移動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; 
    } 
}

來源

2014-08-28 user2162672

在另一把一切之前， div容器並將該容器浮動。從'''.uni'''中移除浮動。 – onetwo12 2014-08-28 15:33:00

你是浮動.uni但之後.learn，更何況它只會浮空來找元素。 uni

此外，.uni會嘗試佔用整個寬度，因此您需要限制寬度，以便爲其他部分騰出空間，以便下一次浮動它。

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

.learn-more{ 
    float:right; 
}

這應該使它適合你。然後根據您是否希望它響應，您可以將寬度更改爲百分比。你也可以通過讓.uni首先在你的html中實現同樣的效果，然後將它浮起來。而不是浮動。學習更正確。

請參閱這裏爲小提琴。（請不，如果你調整窗口大小小.uni將再次向下彈出的底部

http://jsfiddle.net/uhwwrh3u/

來源

2014-08-28 15:32:25 GifCo

非常感謝您的幫助 – user2162672 2014-08-28 15:52:16

這裏有2個問題：

你.unidiv是內您的。學習更多div，所以它不能移動到它的右邊，你需要將它移動外部。瞭解更多div，所以它代替容器的小孩。
您的寬度限制不允許在右側有很多空間。更多信息div。我設法通過將寬度限制爲150px來適應.unidiv，但是您可能需要重新調整東西以使其看起來更好一些。（根據您的瀏覽器窗口，你的顯示器的寬度，你可能需要重新大小的東西，使.unidiv向右移動。）

JSFiddle

來源

2014-08-28 15:41:40 GentlePurpleRain

我如何移動底部部分坐在其他標題和段落的右側

回答

相關問題