CSS佈局問題，浮動，嵌套divs

好的，我已收到我正在處理的這個個人網站上的一些有用信息。在我混亂的嵌套divs中，我爲自己創造了一些問題。我已經將該圖像和其旁邊的文本都浮在另一個div中，並將該div對中，這很好。但是爲了在它下面創建一個新段落，我必須將該段落放在一個div中，因爲它上面的浮動需要清除（或者在div旁邊的右邊顯示文本）。我相信有一種更簡單的方式來做我想做的事情。如果有人可能能夠看看我的代碼，並看看我的錯在哪裏結構明智這將是一個很大的幫助...非常感謝。CSS佈局問題，浮動，嵌套divs

正如您所看到的那樣，標題中顯示「最近的工作」正在按照它應有的居中，但它沒有被賦予通常在其上方框中的邊界。

這裏是鏈接：

http://danberinger.com/

來源

2010-02-07 Dan

我不確定我是否遇到了問題...如果您希望#news部分繼續向下，只需在CSS中給它一個邊緣頂部...元素應該具有的通常距離另一個...你必須設置它.. – 2010-02-07 21:30:37

是啊，事情是給新聞部分邊際頂端不起作用，wsanville的答案確實工作我只是不知道這是否是某種黑客。 – Dan 2010-02-07 21:41:24

的問題是，intro_container並不需要它的孩子的整個高度。您將通過把一個元素與清晰的風格2周的div你是浮動後設置獲得預期的效果：

<div id="intro_container"> 

    <div id="messagebox"> 
    ... 
    </div> 

    <div id="picture"> 
    ... 
    </div> 

    <div style="clear: both"></div> 
</div>

這將給「近期工作」正常的填充。

來源

2010-02-07 21:22:49 wsanville

嘿，謝謝你的解決方案。這確實奏效，但我想知道是否應該調整intro_container的高度並將其設置得更大？ – Dan 2010-02-07 21:42:01

給它一個高度也可以，但它不會適應其孩子的身高。使用overflow：hidden; intro_container似乎是最好的方式。 – wsanville 2010-02-07 21:50:19

把overflow:hidden;到div#intro_container選擇上線110

理解爲什麼它的工作原理閱讀這裏：http://csswizardry.com/floats/

來源

2010-02-07 21:23:28 antpaw

我認爲CSS clearfix會做你所描述的，而無需額外玷污你的代碼到底是什麼div元素。 http://www.webtoolkit.info/css-clearfix.html只需將CSS樣式和.clearfix類添加到正在從浮動子項中摺疊的任何div。

來源

2010-02-08 03:39:03

CSS佈局問題，浮動，嵌套divs

回答

相關問題