容器

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）所有项目的宽度相关，以便没有空白空间。

https://i.stack.imgur.com/Oqpxk.png

Answer 1

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

只需将css更改为

即可

.item {
  min-width: 33.33%;
  float: left;
}

.container {
  min-width:468px;
  display: inline;
}

Answer 2

在SO上添加问题时请更具体。你想达到什么目的？你有什么限制和依赖。为什么flexbox没有选项？ （请记住下次）

1. 从容器中删除display:inline！
2. 创建所需数量的列（在此示例中为三个）。
3. 使用所需的最大/最小宽度
在其中创建元素（.box）
4. 使用.box;
将列中的margin:0 auto元素居中
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>