無序纏繞CSS列表佈局問題

也許我會對此錯誤的方式，但我想創建充滿元素這樣的<ul>：無序纏繞CSS列表佈局問題

<li> 
    <div> 
     <img src="img/productname.png" alt="desc" /> 
     <h2>Product name</h2> 
     <p>This text is variable in lenght so the height of each list item may differ.</p> 
    </div> 
</li>

由於這是怎麼回事的網站有一個最大寬度我需要包裝一定數量的物品後（三個似乎是最好的地方），但我無法記住如何去做這件事。

圖像全部位於每個「行」的頂部並且下一行沒有被上一行破壞也很重要。如果我只在列表項上使用float:left;，並且列表中的第一項具有比其他項更長的描述，那麼我最終將此項阻塞下一行的項目，以便得到如下表格：

+-----+-----+-----+ 
|  | 2 | 3 | 
| 1 +-----+-----+ 
|  |  | 
+-----+ 4 | 
     |  | 
     +-----+

現在，我需要的是什麼，優雅僅允許添加更多的列表項，像創建一個佈局：

+-----+-----+-----+ 
|  | 2 | 3 | 
| 1 +-----+-----+ 
|  | 
+-----+-----+ 
| 4 | 5 | 
|  +-----+ 
+-----+

這甚至可能還是我只是想象，我已經創建的佈局像這樣過嗎？我不想使用表格的原因是因爲它不是表格數據，它是一個必須包裝的產品列表，並且清楚地顯示任何具有「css/html」和「網格「在它是無望的，由於目前的網格佈局時尚）

來源

2010-11-11 mludd

如果您不需要它在Firefox 2及更早版本中工作，您可以將<li>的display設置爲inline-block。

要在IE 6（也可能是IE 7，我忘記了何時添加了適當的inline-block支持）的工作，您可以將它們設置爲display: inline。只要他們已經定義了width（我認爲他們有），那麼他們就會顯示好像他們是inline-block - 請參閱http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/

來源

2010-11-11 11:34:46

IE7不支持'inline-block'。我不能計算我使用它的次數，去檢查IE7，並像「那麼，時間來重寫所有這些......」 – 2010-11-11 11:42:12

@傑夫：啊！當然。在這種情況下，你需要'width'和'display：inline'技巧。（我認爲IE 7仍然支持默認爲內聯的HTML元素的'inline-block'，但這不適用於這種情況。） – 2010-11-11 11:43:56

謝謝，這似乎工作令人滿意（認爲它一開始並沒有，但顯然我的瀏覽器決定一次注意CSS上的到期時間）。 – mludd 2010-11-11 11:58:34

那麼你可以實現這種效果，而不使用表，但使用div代替。只需在一個div中放置1,2和3，在另一個div中放置4和5（很明顯，將每個項目子集保存在它自己的ul標籤中）。不知道這是你以後的樣子。聽起來像是你想要實現的一個相當複雜的結構。

來源

2010-11-11 11:32:39 Neil

無序纏繞CSS列表佈局問題

回答

相關問題