Question

我对CSS非常糟糕，无法弄清楚如何做到这一点，它应该是固定的，如果你改变浏览器的宽度，高度它仍然会是3行和3列，请注意不能更改html。

有什么想法吗？包含了我希望看到的图片。

  <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。

Answer 2

看看bootstrap http://getbootstrap.com/，它是这种事情的理想选择！

在您的网站中包含引导程序后，您可以执行以下操作：

<div class="row">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

需要制作3列和3行<div>

2 个答案: