CSS浮動造成內容被推下一個HTML頁面

我已經創建了一個非常簡單的網頁佈局，可以在這裏看到：http://s361608839.websitehome.co.uk/greengold/www/index.html正如你所看到的，似乎有一個問題。 div #rightcol似乎被左邊的頂部div（#leftcolbanner）按下了頁面。CSS浮動造成內容被推下一個HTML頁面

的CSS的#leftcolbanner是：

#leftcolbanner{ 
width: 707px; 
height: 266px; 
float: left; 
background: url(../images/banner_home.gif) no-repeat; 
margin: 20px 0 20px 20px; 
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px; 
border: 1px solid #e1dbce; 
}

和#rightcol：

#rightcol{ 
width: 190px; 
background: #f4f2ec url(../images/bg_rightcol.gif) no-repeat right bottom; 
float: right; 
min-height: 550px; 
padding: 25px; 
-moz-border-radius-topleft: 0px; 
-moz-border-radius-topright: 5px; 
-moz-border-radius-bottomright: 5px; 
-moz-border-radius-bottomleft: 0px; 
-webkit-border-radius: 0px 5px 5px 0px; 
border-radius: 0px 5px 5px 0px; 
border-left: 1px solid #e1dbce; 
}

#leftcolbanner的寬度不應該是問題，爲什麼#rightcol被按下。這似乎是我的經驗中唯一的原因，但這次並非如此。

任何人都可以看到任何我看不到造成這種情況嗎？

非常感謝

來源

2012-04-18 Tim

移動#rightCol格以上#leftCol格。

來源

2012-04-18 16:28:33 dtsg

這適用於我。謝謝。你能解釋它是如何工作的嗎？ – 2013-09-27 06:59:03

@JayantVarshney我知道這是遲到了，我不是瀏覽器開發專家或任何東西，但這是我的猜測：瀏覽器從上到下讀取它，然後在確定要呈現的佈局時「預留」該項目的空間。在#rightCol之前使用#leftCol，它將獲得「最高優先級」，並且#leftCol在爲#rightCol保留空間之前使用該整個***區域，從而將#rightCol降低。我認爲一些瀏覽器會「返回」並正確顯示它。 [從以往的經驗]，我相信Firefox可以迴歸，但Chrome不會。 – 2014-02-16 21:02:59

<div id="main"> 
<div id="leftcolbanner"> 
<h2>Willkommen im Ausbildungsstall Green&amp;Gold</h2> 
<p>Ut ligula eros, consequat vitae varius eget, consequat ac neque. Vestibulum venenatis odio vitae erat tristique gravida in in elit. Duis molestie ante turpis.</p> 
</div> 
<div id="rightcol"> 
<h2>Kontact</h2> 
<p><strong>GREEN&amp;GOLD GmbH</strong><br> 
Dressurausbildungsstall<br> 
Hauptstrasse 3<br> 
4525 Balm b. Günsberg</p> 

<p><a href="mailto:[email protected]" class="emailbutton">[email protected]</a></p> 

<div id="rightcolline"></div> 

<p><strong>Christian Pläge</strong><br> 
+41 79 4 73 52 10</p> 

<p><strong>Birgit Wientzek Pläge</strong><br> 
+41 79 2 74 27 67<br> 
Fax +41 32 6 37 08 53</p> 

</div> 
<div id="leftcol"> 
<p>Curabitur gravida tristique felis, eu lobortis neque iaculis vitae. In lacus dui, feugiat eu iaculis sit amet, laoreet ut quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> 
<p>Nullam interdum, justo in porta rutrum, sem velit pulvinar purus, id scelerisque orci sem sit amet lacus. Proin posuere nunc quis sapien hendrerit sollicitudin sollicitudin dolor egestas. </p> 
<p>Sed nibh magna, imperdiet a ullamcorper vel, elementum at turpis. Quisque sed sem et tellus pretium pretium sed vel nulla. Suspendisse potenti. Vivamus vehicula ultrices enim, quis sagittis tortor dignissim ut. Nulla quis neque sed erat interdum porta. Donec iaculis libero eu justo volutpat volutpat condimentum metus rutrum. Quisque viverra mattis suscipit.</p> 
</div> 



</div>

來源

2012-04-18 16:32:06 EnigmaMaster

您可以將右列放在您的3個div容器的第一個位置，它應該可以解決問題。

來源

2012-04-18 16:32:17 mpm

我認爲你應該添加一個div與float：left;然後放置leftcolbanner和leftcol然後它應該工作。

來源

2012-04-18 16:32:38

更好的辦法是把#leftcolbanner & #leftcol放在一個DIV中。然後給浮到他們這樣寫：

HTML

<div class="left"> 
<div id="leftcolbanner"></div> 
<div id="leftcol"></div> 
</div> 
<div id="rightcol"></div>

CSS

.left{float:left} 
#rightcol{float:right}

來源

2012-04-18 16:35:30 sandeep

你需要把這些div中容納其內容的尺寸的div容器。請參閱jsfiddle，將它們放在一個帶有width:1000px的div中，並排排列。

來源

2012-04-18 16:41:03

CSS浮動造成內容被推下一個HTML頁面

回答

相關問題