浮動權問題

這裏的鏈接： http://www.whiterootmedia.com/homepage_layout_test/浮動權問題

下面的代碼：

<body> 


<div class="site" style="background:yellow; "> 

<div class="banner" style="background:blue; height:100px; width:417px; float:left;">Banner Banner Banner Banner Banner </div> 
<div class="ads" style="background:green; height:800px; width:160px; float:right;">Ads Ads Ads Ads Ads Ads Ads Ads Ads </div> 
<div class="tree" style="background:orange; height:400px; width:auto; min-width:417px; clear:left;">Tree Tree Tree Tree Tree Tree </div> 

</div> 


    </body>

我想綠色格留沿頂，橙色的div內容不走綠色DIV背後，橙色div的最小寬度爲417px。預先感謝您提供的任何幫助！

塵埃

來源

2011-08-17 Dusty

重新更新，更簡單的修復。 – chris

你在你的代碼一個錯字在這裏：

<div class="tree" 
    style="background:orange; height:400px; width:auto; min-width:4170px; clear:left;"> 
    Tree Tree Tree Tree Tree Tree 
</div>

你設置min-width爲4170px。

將其更改爲417px，所有問題都會消失。使用「現場」您

來源

2011-08-17 20:25:00 Ibu

修正了錯字，但行爲仍然相同... – Dusty

div的作爲包裝/容器 - 設置它的最小寬度到樹+寬度的廣告的最小寬度 - 417 + 160 = 577px

<div class="site" style="background:yellow; min-width: 577px;">

然後，每當你低於這個寬度，它不會在所有事物上拉上綠色的「廣告」。如果您將填充/邊距添加到樹或廣告div中，則必須將其添加到容器的最小寬度中。

來源

2011-08-17 20:29:04 chris

我不在乎身體的邊距/填充/邊框。如果你縮小頁面，你會看到我在說什麼 – Dusty

你是否擔心橙色部分內的內容會在廣告面板下？ – chris

謝謝喬治！這清理了很多，但現在我有第二個問題。假設有橙色的div文字......我怎麼才能得到那個文本來將綠色的div推離屏幕。 http://www.whiterootmedia.com/homepage_layout_test/ – Dusty

回答

相關問題