html - 需要制作3列3行的

Question

我的 CSS 真的很糟糕，不知道该怎么做，它应该是固定的，如果你改变宽度，浏览器的高度它仍然是 3 行和 3 列，请注意可以'改变html。

有什么想法吗？包括我想看到的图片。

3 rows and 3 columns

  <div class="row">
       <div class"column"></div>
       <div class"column"></div>
       <div class"column"></div>
       <div class"column"></div>
       <div class"column"></div>
       <div class"column"></div>
       <div class"column"></div>
       <div class"column"></div>
       <div class"column"></div>
</div>

.column {
  background: #fff;
  border: 1px solid #999;
  font-size: 24px;
  font-weight: bold;
  height: 200px;
  width: 200px;
  margin:20px;
}

Answer 1

一个非常简单的 CSS 解决方案

.row .column {
  display:inline-block;
  width: 33.333%;
  min-height: 50px; //or whatever
}

这里的关键是display:inline-block。