顯示塊不能像思想一樣工作...？

我知道這是一個常見問題，我已經嘗試過搜索的方法。這裏是jsfiddle：http://jsfiddle.net/ZfZK9/這裏是我的問題顯示塊不能像思想一樣工作...？

基本上，我有一個主要的div容器。它有一個圖像和一些文字。我需要一邊的形象，然後是另一邊的文字。我試着將img放在div中，將它的高度設置爲100％，然後將它浮動到正確的位置，但正如您在jsfiddle中看到的，一旦文本低於圖像，它就不會保持列的形成。

我不知道爲什麼顯示：塊和高度：100％在左欄上沒有任何好處。

感謝

編輯：我假設高度：100％不起作用，因爲被渲染，然後文本被後來添加的。我仍然試圖找到一個優雅的解決方案，而且通用。

的另一個問題是，當我同時設置的div（圖像和文本的）浮動：左，它只是顯示的圖像，然後下面的文本它

來源

2012-01-10 Raekye

下次在保存小提琴之前單擊「TidyUp」按鈕... – 2012-01-10 02:25:21

感謝您的提示。對不起， – Raekye 2012-01-10 02:29:23

'height：100％'不工作，因爲'main_content'沒有高度。例如：['height：780px;']（http://jsfiddle.net/ZfZK9/13/）。（注意，我還在左側'div'中刪除了'class =「clearfix」'，因爲它似乎沒有任何意義）。 – 2012-01-10 02:34:09

這是可以做到這樣的：http://jsfiddle.net/ZfZK9/34/

只需創建兩個div的周圍兩側列，那麼這兩個側面設置爲特定寬度，然後直到你得到你想要的東西玩的填充和保證金。

爲了讓您的邊框內容，我添加了一個clearfix這將有助於包含兩個浮動列....

http://jsfiddle.net/ZfZK9/34/

不得不修改一些東西，花了一點得到它對，但現在一切都應該工作。包含兩個浮動div，並在瀏覽器中添加了明確的修補程序。如果你想讓圖像或側邊欄看起來像是繼續到底部，請閱讀有關Faux Columns

來源

2012-01-10 02:38:05

非常感謝！ – Raekye 2012-01-10 03:13:36

不客氣！ – 2012-01-10 05:27:39

你必須在html有的一些CSS在CSS中，這很難遵循。我認爲我看到的是一個常見的錯誤，你必須考慮什麼時候你必須考慮100％，100％是什麼？它始終是該元素的父項。那麼父母設置了什麼？如果沒有，那就是你的問題。

請記住，如果父母也設置爲100％，則同樣的問題將適用。

編輯：我現在看到了這個問題。我誤解了。然後你想要做的是設置正確的div的寬度，文本的寬度。正確地浮動它應該解決問題。

來源

2012-01-10 02:33:58 Rob

我試過了，但現在它的行爲就好像400開始從父容器的左邊。我怎樣才能設置它，使右邊的列/ div知道它的開始位置是第一列的右邊緣？ – Raekye 2012-01-10 02:36:25

顯示塊不能像思想一樣工作...？

回答

相關問題