在HTML中堆疊列表

-1

我有多個列表，我想要在網頁上的標籤中顯示。我希望它看起來像 this 。有7個列表 - 左邊的列表非常長。其餘的都是一樣的大小，我希望他們出現在很好的順序。注意*最左邊的列表將向下延伸，然後是兩個堆疊的行。在HTML中堆疊列表

我試過這個 - 但它似乎沒有工作......另一種方式的思考？

<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>

來源

2014-03-31 mcfly

表格不適用於佈局。花時間學習CSS浮動。 –

到目前爲止你所做的並沒有什麼作用。這不是給你所要求的表格結構嗎？ – David

請參閱[這個問題]（http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html?rq=1）爲什麼你不應該使用表作爲佈局。 – TylerH

擺脫表和包裝所有您列出<div>小號

使用CSS來float: left一號股利和float: right上所有的休息。

來源

2014-03-31 15:15:20 Starscream1984

就像Starscream1984說的，你可以使用浮動。

您可以對右側列表使用display：inline-block，這樣它們將保持相鄰。

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

vertical-align：top將幫助他們顯示更好。

我希望這將幫助你：http://jsfiddle.net/6dbar/

來源

2014-03-31 15:21:35 ezakto

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>

把你的「ul's」放在d IVS。

正如你可以在小提琴的html中看到的那樣，使用的類是.col2，因爲你需要每個div的寬度爲2列8 ...你可以用col6和另一個col2來實驗div。 .. 2 divs col4等...

注意：永遠不要忘記將類.lastcall添加到將放置在容器右側的div。要看到小提琴的權利，打開窗口（寬度）很多，直到你可以看到它1006px或更多。

來源

2014-03-31 15:42:32

在HTML中堆疊列表

回答

相關問題