6 个单元格 3*2 网格布局，带 div

Question

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

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

<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;
}

6 个单元格 3*2 网格布局，带 div

6 cells 3*2 grid layout with divs

html

css

grid-layout