如何在css/html中響應的columner中創建詞彙表？

Question

想要讓一個詞彙列表中的HTML CSS &看起來像這樣：

頁眉（空間空間空間空間）標題2
1號一文（空間空間S）4.第四大
2。數字二（空間空間空間）5.五號
3號三個文本（空間空間）6.老六

當你減少你的瀏覽器，列表變爲

頁眉
1.頭號
2.二號
3.第三

標題2
4.數4
5.數5

，最簡單的辦法是使用一個表，但它確實縮小瀏覽器時不會像上面那樣改變。如果您使用列表，則必須使用填充，當您減少瀏覽器時也會變得很奇怪。

Answer 1

你應該可以用CSS使用float做到這一點。這將使兩者並排出現，除非容器寬度小於兩個寬度的組合（加上邊框），然後它們將堆疊。顯然你會想做一些樣式，而且你不需要使用UL/LI，甚至可以在div中使用表格。

​#table1 { 
    border: 1px solid #000; 
    float: left; 
    width: 200px; 
} 

#table2 { 
    border: 1px solid #000; 
    float: left; 
    width: 200px; 

} 

<div id='table1'> 
    <h1>Head 1</h1> 
    <ul> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    </ul> 
</div> 
<div id='table2'> 
    <h1>Head 2</h1> 
    <ul> 
    <li>Item 4</li> 
    <li>Item 5</li> 
    <li>Item 6</li> 
    </ul> 
</div> 

Answer 2

您可以使用浮動DIV元素。

<div style="float:left; padding: 5px 30px 5px 5px; width:400px"> 
    <h1>Heading 1</h1> 
    <ul> 
    <li>Number one</li> 
    <li>Number two</li> 
    <li>Number three</li> 
    </ul> 
</div> 
<div style="float:left; padding: 5px 30px 5px 5px; width:400px"> 
    <h1>Heading 2</h1> 
    <ul> 
    <li>Number four</li> 
    <li>Number five</li> 
    </ul> 
</div> 

如果你的瀏覽器窗口更寬話〜800像素，該DIVs將顯示彼此相鄰。當您縮小視口寬度時，第二個DIV將移動到第一個DIV以下。