如何在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以下。