Question

我必须不使用<table>创建表；只有1个}}。如何在某些块上设置宽度（以百分比为单位），以使其他块平均分配其余空间。

我可以使用JS来做到这一点，但我认为只有html / css才有可能。

Answer 1

使用flexbox可以很容易地创建类似结构的表格。为表格单元格（框）指定一个弹性基础，然后增加和缩小以使其正确调整大小。

通过演示检查这个小提琴:)

HTML代码：

  <div id="container">
        <div class="box">
        </div>
        <div class="box">
        </div>
        <div class="box">
        </div>
        <div class="box">
        </div>
        <div class="box">
        </div>
        <div class="box">
        </div>
        <div class="box">
        </div>
        <div class="box">
        </div>
        <div class="box">
        </div>
        <div class="box">
        </div>
        <div class="box">
        </div>
        <div class="box">
        </div>
        <div class="box">
        </div>
        <div class="box">
        </div>
        <div class="box">
        </div>
        <div class="box">
        </div>
    </div>

和CSS代码：

#container {
    display: flex;
    flex-wrap: wrap;
}
.box {
    border: 1px solid gray;
    background: orange;
    flex: 1 1 200px;
    height: 100px;
}

在某些元素具有固定宽度之后，如何平均分配div

1 个答案: