css - 容器中子元素的可调宽度

Question

有子元素的父容器:

.item {
  min-width: 156px;
  max-width: 188px;
  width: auto;
  float: left;
}

.container {
  display: inline;
}

<div class="container">
  <div class="item"> </div>
  <div class="item"></div>
  <div class="item"></div>
</div>

我需要将所有元素一一放置。并且在调整容器大小时，它们必须具有最大可用宽度(在指定范围内)。什么可能是解决方案？ flexbox 不是一个选项。元素也由 Angular 生成，可以是任意数量。我有附加屏幕。由于我更改了窗口大小，因此右侧有空位(标记为红色)。但事实并非如此。有两种选择。 1) 如果有足够的空间，则添加新元素 2) 所有元素的宽度相关，因此没有空白空间。

/image/Oqpxk.png

Answer 1

添加有关 SO 的问题时请更具体。你想达到什么目的？您的局限性和依赖性是什么。为什么 flexbox 没有选项？ (下次记住就好)

1. 从容器中移除display:inline!
2. 创建所需数量的列(在本例中为三列)。
3. 在其中创建具有所需最大/最小宽度的元素 (.box)
4. 使用 margin:0 auto 将列内的 .box 元素居中；
5. 你现在有一个“大部分”灵活的网格(没有 flexbox)

.container {
  border: 2px solid green;
  overflow: hidden; /* hacky clearfix */
}

.item {
  width: 33.33%;
  float: left;
  border: 2px solid red;
}

.box {
  min-width: 156px;
  max-width: 188px;
  margin: 0 auto;
  background: #ddd;
}

.container,
.item,
.box {
  padding: 10px;
  box-sizing: border-box;
  font-family: sans-serif;
}

<div class="container">
  <div class="item">
    <div class="box">
      min-width: 156px; <br> max-width: 188px;
    </div>
  </div>
  <div class="item">
    <div class="box">
      min-width: 156px; <br> max-width: 188px;
    </div>
  </div>
  <div class="item">
    <div class="box">
      min-width: 156px; <br> max-width: 188px;
    </div>
  </div>
</div>