CSS表样式

Question

我想在页面中创建以下类似于表格的元素：

我曾经使用<table>...<table>标签来做，但现在我将所有网站切换到CSS，我正在使用DIV等。 我想知道实现这种元素的“最佳”方法是什么（它仍然是<table>标签吗？）。 我不想仅使用<BR />在同一列中创建3列和单独的项目，因为我想控制同一列中元素之间的间距（例如Item1和Item4之间）。

谢谢！

乔尔

Answer 1

使用display:table，display:table-row，display:table-cell

#table {display:table;}
.row {display:table-row; }
.cell{display:table-cell;}

<div id="table">
  <div class="row">
    <div class="cell">Item 1</div>
    <div class="cell">Item 2</div>
    <div class="cell">Item 3</div>
  </div>
  <div class="row">
    <div class="cell">Item 4</div>
    <div class="cell">Item 5</div>
    <div class="cell">Item 6</div>
  </div>
  <div class="row">
    <div class="cell">Item 7</div>
    <div class="cell">Item 8</div>
    <div class="cell">Item 9</div>
  </div>
</div>

实例http://jsbin.com/awagu4

...但如果您需要桌子，我建议您使用table html标签。出于这个原因存在，然后你可以用css修改它。无论如何，两种解决方案都有相同的结果。

Answer 2

使用嵌套在div元素中的无序列表

可以达到相同的效果

<div class="wrapper">
    <ul class="itemHolder">
        <li><div>item1</div></li>
        <li><div>item2</div></li>
        <li><div>item3</div></li>
        <li><div>item4</div></li>
        <li><div>item5</div></li>
        <li><div>item6</div></li>
        <li><div>item7</div></li>
        <li><div>item8</div></li>
        <li><div>item9</div></li>
    </ul>
</div>

这将是你的css

.wrapper{
    width:600px;
}
.itemHolder{
    margin:0;
    padding:0;
}

.itemHolder li{
    float:left;
    margin-bottom:10px;
}
.itemHolder li div{
    width:200px;
}

你可以看到它here

Answer 3

使用表来创建布局通常不受欢迎。对于表格数据使用div和CSS以及div也是不受欢迎的。最好的方法 - 按照你的问题的要求 - 在这种情况下使用表格。

除非图像中表示的项目不是制表数据，否则容器/盒子将保存相应的数据。在这种情况下，我可能会推荐CSS。

Answer 4

您也可以使用flexbox实现此目的。

.items {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

这将生成一个像结构一样的响应表。

Answer 5

将列表样式设置为none，并且使用float可以对表格产生类似的结果。有这个链接：http://mindrulers.blogspot.com/2008/03/create-table-using-css.html，这就是它的实际应用：http://www.jsfiddle.net/pJgyu/3247/

Answer 6

我个人更喜欢在进行布局时使用设计网格。

目前，我会推荐这个“框架”：http://960.gs/ 960的名称是因为它的设计宽度为960像素，所以在大多数最小1024像素的计算机上都可以看到它。 960是一个很大的数字，可以分为列等，但请查看网站了解更多信息。

Answer 7

在解决您应该使用的方法时：

如果这纯粹是一个布局问题而且项目没有语义关系问题，我会将其用作容器，行和项元素。在这种情况下使用类似Sotiris' answer.

的内容

如果您的项目与语义相关，请查看他们的相关人员。如果它们在语义上是成组的，即表使用表，特别是如果每​​列都有标题。如果它通常只是一组相关项，请使用类似cac's answer的列表结构（thoguh它可能会丢失内部div）。

列表方法也有一些有趣的变化。

通过从Cac的答案中移除包装器或包装器的宽度，您可以创建一个布局，将其自身调整到不同的浏览器宽度，因此对于更宽的屏幕，您将获得更少的元素行，因为您将获得更多的元素这一行。

如果这是unordered list的更好的语义选项，也不要忽略定义列表。

Answer 8

Flex盒适用于此。

＆＃13;

＆＃13;

ul {
    display: flex;
    flex-flow: row wrap; 
}

li {
     flex-basis: 40%; 
} 

＆＃13;

<ul> 
    <li> item 1</li> 
    <li> item 2</li> 
    <li> item 3 </li> 
    <li> item 4 </li> 
</ul> 

＆＃13;

＆＃13;

＆＃13;