显示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在垂直方向

回答

相关问题