6个单元格3 * 2网格布局与divs

Question

我想知道使用DIVS创建这个3 * 2“表”的最佳方法是什么？

我很想使用简单的表格代码

<table>

因为它会更容易，但今天的趋势是使用Divs。 因此，创造这样的东西最好，最优雅的方式是什么？

我总是想知道为什么表突然消失了，我以前只使用表创建网站（不久前）。

Answer 1

最简单的答案：

div {
  width: 33%;
  float: left;
  border: 1px solid black;
  height:100px;
}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

Answer 2

如果您只需支持IE10 +就可以使用，可以使用flexbox：

*,*:before,*:after{
  box-sizing: border-box;
}
.container{
  border: 1px solid black;
  display: flex;
  flex-wrap: wrap;
}
.cell{
  width: 33.33%;
  height: 100px;
  border: 1px solid black;
}

<div class="container">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>

如果你想玩它，请点击这里 - http://codepen.io/braican/pen/QbdbYb

Answer 3

您也可以使用https://jsfiddle.net/ftwn8q7w/1/

<div class="raw">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>
<div class="raw">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>

.raw{
     display:table;
    width:100%;
}
.col{
    display:table-cell;
    border:1px solid;
    height: 100px;
}