使用CSS可以方便地创建出漂亮的网页布局,其中三行两列表格通常是一个非常常见的布局形式。通过学习以下的CSS代码,我们可以轻松地实现这种布局形式。 首先是HTML代码,我们使用一个div容器来包含表格
<div class="table"> <div class="row"> <div class="cell">1</div> <div class="cell">2</div> </div> <div class="row"> <div class="cell">3</div> <div class="cell">4</div> </div> <div class="row"> <div class="cell">5</div> <div class="cell">6</div> </div> </div>
.table { display: flex; flex-wrap: wrap; justify-content: space-between; } <br> .row { display: flex; flex-basis: calc(50% - 10px); } <br> .cell { flex-grow: 1; height: 100px; margin: 0 5px 10px 5px; background-color: #ddd; text-align: center; line-height: 100px; font-size: 36px; }
粉丝
0
关注
0
收藏
0