如果它是一个带有div的表，那就好像

Question

我在这里：

<div id="my_div">
<a href='#'>Link 1</a>
<a href='#'>Link 2</a>
<a href='#'>Link 3</a>
<a href='#'>Link 4</a>
<a href='#'>Link 5</a>
<a href='#'>Link 6</a>
<a href='#'>Link 7</a>
<a href='#'>Link 8</a>
<a href='#'>Link 9</a>
<a href='#'>Link 10</a>
</div>

我希望HTML页面如下所示：

Link 1 Link 2
Link 3 Link 4
Link 5 Link 6
Link 7 Link 8
Link 9 Link 10

或者，如果我想要3乘3的元素：

Link 1 Link 2 Link 3
Link 4 Link 5 Link 6
Link 7 Link 8 Link 9
Link 10

如何使用CSS来实现这一目标？

我想在每个链接中放一张图片（有图片和文字的按钮）

所以我的a元素可能有一些宽度，填充等等。

Answer 1

  

CSS Multi-column Layout Module

     

该模块描述了CSS中的多列布局。通过使用   本文档中描述的功能，样式表可以声明   元素的内容将在多列中布局。   在Web上，表也用于描述多列   布局。使用基于CSS的列的主要好处是灵活性;   内容可以从一列流到另一列，以及列数   可能会有所不同，具体取决于视口的大小。删除演示文稿   来自文档的表格标记允许更容易地呈现它们   各种输出设备，包括语音合成器和小型移动设备   设备

如果使用CSS multi-column layouts是一个选项，您可以按如下方式实现布局：

<强> Example Here

#my_div {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;

  -webkit-column-gap: 2em;
  -moz-column-gap: 2em;
  column-gap: 2em;
}

#my_div > a { display: block; }

虽然它得到了Firefox，Chrome / Safari的良好支持，但won't work on IE9 and below可能会或可能不会满足您的需求。

Answer 2

一种可能的方法：

a {
  display: inline-block;
  width: 32%; // 49% for 2 columns, etc.
}

Demo

Answer 3

DEMO:

a{width:50%;}
a:nth-child(-n+5) {
    float:left;   
}
a:nth-child(n+6) {
    float:right;   
}

或

a{width:50%;}
a:nth-child(odd) {
    float:left;   
}
a:nth-child(even) {
    float:right;   
}

Answer 4

您可以尝试：

THIS ONE

#my_div a:nth-child(odd) {
   clear: left;
}

#my_div a {
     float: left;
}

#my_div2 a:nth-child(3n+1) {
   clear: left;
}

#my_div2 a {
     float: left;
}

Answer 5

您可以使用：

a:nth-child(odd){
    clear: left;
}

a{
    float: left;
    margin: 10px;
}

fiddle

或者如果您想要3乘3的元素：

a:nth-child(3n+1){
    clear: left;
}

a{
    float: left;
    margin: 10px;
}

fiddle