html - 如何在css中将一个div分成多行和多列？

Question

我在 maindiv 中有一个 div subdiv。我想将子 div 分成多行和多列，如下所示。

如何划分subdiv如下

Answer 1

你可以这样做

div{
  display:inline-block;
  float:left;
  color:#fff;
  font-size:40px;
}

.one{
  width:150px;
  height:200px;
  background:red;
}

.two{
    width:100px;
  height:200px;
  background:lightgreen;
}

.three{
    width:100px;
  height:200px;
}

.four{
  width:100px;
  height:100px;
background:darkblue;
}
.five{
  width:100px;
  height:100px;
background:blue;
}

<div class="one">1</div>
<div class="two">2</div>
<div class="three">
  <div class="four">4</div>
  <div class="five">5</div>
</div>