CSS：調整元素的大小而不是清除浮點數

我有一個包含圖像的框，它具有float：left set和textual contents。CSS：調整元素的大小而不是清除浮點數

------------------------------------- 
|---------       | 
||  |       | 
|| Image |       | 
||  |  Content    | 
|---------       | 
|         | 
|         | 
|         | 
-------------------------------------- 
           Fig. 1

我通常認爲讓內容在圖像周圍浮動是一件好事。然而，在使用名單的情況下，下面看一下是煩人：

------------------------------------- 
|---------       | 
||  | List     | 
|| Image |       | 
||  | 1. Item     | 
|--------- 2. Item     | 
| 3. Item       | 
| 4. Item       | 
|         | 
-------------------------------------- 
           Fig. 2

我寧願它通過以下方式（至少在相當短名單，讓我們假設該列表是短現在）

------------------------------------- 
|---------       | 
||  | List     | 
|| Image |       | 
||  | 1. Item     | 
|--------- 2. Item     | 
|   3. Item     | 
|   4. Item     | 
|         | 
| Additional content (not in list) | 
-------------------------------------- 
           Fig. 3

我通過使列表display: inline-block（和任一插入列表之前一個<br>，或在塊級元素包裹它）

然而，在任何長的列表項的情況下（長於得到上述外表內容字段的小寬度）浮動清除。

------------------------------------- 
|---------       | 
||  |       | 
|| Image |       | 
||  |       | 
|---------       | 
| 1. Item       | 
| 2. A very long item, which makes | 
| the list box just as wide as the| 
| outer box.      | 
| 3. More items      | 
-------------------------------------| 
           Fig. 4

爲什麼這種情況對我來說似乎很清楚。在浮動環境中，首先，將列表呈現爲一個塊（因爲display: inline-block），使用外部框的寬度作爲環境寬度。由於存在較長的物品，所得到的區塊將與外框一樣寬。在第二步中，塊試圖放在浮動圖像旁邊，它不適合。最後，浮動清除。

有沒有辦法修改這種情況？就像，首先嚐試使用更短的寬度渲染列表，如果失敗，重新渲染？或者完全不同的方式來實現我想要的？

來源

2012-09-13 Jo So

列表上不會有'max-width'嗎？ – bfavaretto

@bfavaretto：不，如果浮標已被清除，則列表應占據整個空間。 –

在您的列表上嘗試一個普通的overflow:hidden - 這應該是個訣竅。

查看example。

來源

2012-09-13 16:57:23 Christoph

我不這麼認爲。或者我誤解了，至少不能讓它起作用 - 請解釋它爲什麼應該這樣做。 –

@JoSo看看我的編輯。 – Christoph

太棒了！它神奇地工作（也有'overflow：auto'和'overflow：scroll'）（提示如果jsfiddle已經消失了：不要在列表中使用內聯塊！）。該規範的相關部分在哪裏起作用？ –

將列表放入一個DIV中，該列表也以定義的寬度向左浮動。

來源

2012-09-13 16:33:00 RedFilter

就是我要說的。（或者根據父級的計劃，「float：right」） – Scrimothy

這就像從圖4中得到狀態，並向列表中添加一個定義的寬度（它被設置爲內聯塊），不是嗎？但我無法忍受修正列表的寬度。該列表應占用整個寬度，以防浮游物已被清除。 –

@JoSo考慮到你的意見，我不確定你是否應該使用花車。你有沒有嘗試使所有內聯塊，而不是浮動？只要提防空白...... – bfavaretto

CSS：調整元素的大小而不是清除浮點數

回答

相關問題