以HTML格式堆叠列表

Question

我想在网页的标签页中显示多个列表。我希望它看起来像。有7个列表 - 左边的列表非常长。其余的都是相同的大小，我希望它们以良好的顺序出现。注意*最左侧的列表将向下延伸，然后是两个堆叠的行。

我试过这个 - 但它似乎没有起作用......另一种方式的想法？

<table id="Lists">
<tr>
<td rowspan="2"><ol id="Long_List"></ol></td>
<td><ol id="a_List"></ol></td>
<td><ol id="b_List"></ol></td>
<td><ol id="c_List"></ol></td>
</tr>
<tr>
<td><ol id="d_List"></ol></td>
<td><ol id="e_List"></ol></td>
<td><ol id="f_List"></ol></td>
</tr>
</table>

Answer 1

摆脱桌面并将所有列表包装在<div> s

中

在第一个div上使用css float: left，在所有其余部分使用float: right。

Answer 2

就像Starscream1984所说，你可以使用花车。

你可以使用display：inline-block作为右侧列表，这样它们就可以保持紧密相连。

ul {
    display: inline-block;
    width: 30%;
    vertical-align: top;
}

vertical-align：top将帮助他们显示更好的效果。

我希望这会对您有所帮助：http://jsfiddle.net/6dbar/

Answer 3

http://jsfiddle.net/Thq53/2/（已更新......小提琴中有错误）

这里有一个简单易用的布局：

/*   A BASIC LAYOUT for a 1006px width container and 8 columns  */

.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8   {
 float: left; 
margin: 0 18px 0 0;  
}

.lastCol { margin-right: 0 !important; }


.col1  { width: 110px; }
.col2  { width: 238px; }
.col3  { width: 366px; }
.col4  { width: 494px; }
.col5  { width: 622px; }
.col6  { width: 750px; }
.col7  { width: 878px; }
.col8  { width: 1006px; margin: 0;}

.container { 
margin: 0 auto; 
padding: 0 0px; 
width: 1006px; 
text-align: left; 
overflow:hidden;
position:relative;
}

/*  --------------------------------- */
.big {
background-color:blue;
height:800px;
 }
.small {
background-color:blue;
height:391px;
margin-bottom:18px;
}

和html：

<div class="container">
<div class="col2 big"></div>
<div class="col2 small"></div>
<div class="col2 small"></div>
<div class="col2 small lastCol"></div>
<div class="col2 small"></div>
<div class="col2 small"></div>
<div class="col2 small lastCol"></div>
</div>

把你的＆＃34; s＆＃34;里面的div。

正如你在小提琴的html中看到的那样，使用的类是.col2，因为你需要8个中每个div 2列的宽度...你可以用col6和另一个用col2来试验div。 .2 divs col4等...

注意：永远不要忘记将类.lastcall添加到将放置在容器右侧的div中。要看到小提琴，请打开窗户（宽度），直到看到1006px或更多。