顯示HTML UL在垂直方向

通常我使用UL有喜歡這款產品的列表，只需添加「浮動：左」的李，你幾乎運行：顯示HTML UL在垂直方向

p1 p2 p3 p4 
p5 p6 p7 p8

現在我在我希望它適合這種情況：

p1 p4 
p2 p6 
p3 p7 
p4 p8

這可能嗎？

編輯：

在P1的內容是動態的，並且可以是尺寸（高度）不同。所以我正在尋找像文章佈局的東西。等等：也許在第一個列表中只有3個產品的空間，下一個行中只有4個。所以我不能使用像兩個不同的列表，因爲內容和產品可以改變。

來源

2011-06-09 Luticka

最簡單的方法是將它分成兩個浮動列表，因爲'ul'默認已經是垂直的。 – BoltClock 2011-06-09 11:16:58

是的，這就是所謂的一個「表」與2列。 :) – Bazzz 2011-06-09 11:18:17

您可以添加有關您的用例的特定信息嗎？例如：列數是否固定？還是可以改變窗口的大小？ JavaScript修復會被接受嗎？（可以使用jQuery嗎？）有沒有涉及輸出產品的服務器端代碼？你需要支持哪些瀏覽器？ – thirtydot 2011-06-09 11:29:00

您可以使用CSS3 multi-column module，但它並沒有得到廣泛的支持，但（即不會在工作IE）。

來源

2011-06-09 11:29:19 Tyssen

這就是我想要的http://kmsm.ca/2010/an-almost-complete-guide-to-css3-multi-column-layouts/但我怎樣才能使它在舊的瀏覽器中工作？ – Luticka 2011-06-09 12:08:29

可能需要使用js，如下例所示：http://www.cvwdesign.com/txp/article/360/multi-column-layout-with-css3-and-some-javascript – Tyssen 2011-06-09 12:22:10

這工作：

CSS：

<style type="text/css"> 
ul { 
    float:left; 
} 
.clearlist { 
    clear:both; 
    margin:0 410px 0 34px; 
} 
</style>

HTML：

<ul> 
    <li>p1</li> 
    <li>p2</li> 
    <li>p3</li> 
    <li>p4</li> 
</ul> 

<ul> 
    <li>p5</li> 
    <li>p6</li> 
    <li>p7</li> 
    <li>p8</li> 
</ul> 

<div class="clearlist"></div>

來源

2011-06-09 11:27:53 jao

您可以從this article中挑選您的方法。正如你所看到的，你將不可避免地要妥協。

來源

2011-06-09 11:30:55

我會建議這樣做。將列嵌套在li元素中。

CSS：

ul  { overflow:hidden } 
li  { float:left } 
li li { float:none }

HTML：

<ul> 
    <li>Column 1 
     <ul> 
      <li>Lorem</li> 
      <li>Ipsum</li> 
     </ul> 
    </li> 
    <li>Column 2 
     <ul> 
      <li>Dolor</li> 
      <li>Sit</li> 
      <li>Amet</li> 
     </ul> 
    </li> 
</ul> 
<p>This text is not floated because the list has overflow set to 'hidden'.</p>

如果內容是動態的，只是讓你的腳本解析成不同的名單。

來源

2011-06-09 12:00:02 Midas

顯示HTML UL在垂直方向

回答

相關問題