Question

我有<div class="wrapper">并且其中的所有div都相等地位于彼此旁边。但是当我有太多它们时，它们彼此太靠近了。所以当有超过4个div时，我想让滚动条出现。每个div至少占父母div的25％。

我试图将min-width: 25%添加到包装内的div中，但它不起作用。

我怎样才能在CSS中做到这一点？

.wrapper {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.wrapper div {
  display: table-cell;
}

<div style="position: absolute; background-color: #dedede; bottom: 5%; left: 5%; width: 90%">
  <p>text...</p>
  <div class="wrapper">
    <div>Aaa</div>
    <div>Aaa</div>
    <div>Aaa</div>
    <div>Aaa</div>
    <div>Aaa</div>
    <div>Aaa</div>
  </div>
</div>

Answer 1

您可以使用flex并将弹性基础设置为子级的25％和父级的overflow: auto。

＆＃13;

.wrapper {
  display: flex;
  overflow: auto;
}

.wrapper div {
  flex: 0 0 25%;
}

＆＃13;

<div style="position: absolute; background-color: #dedede; bottom: 5%; left: 5%; width: 90%">
        <p>text...</p>
        <div class="wrapper">
            <div>
                Aaa
            </div>
            <div>
                Aaa
            </div>
            <div>
                Aaa
            </div>
            <div>
                Aaa
            </div>
            <div>
                Aaa
            </div>
            <div>
                Aaa
            </div>
        </div>
    </div>

＆＃13;

位置div平等，当有太多时溢出它们

1 个答案: