集装箱

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生成，可以是任何数字。 我已经获得了屏幕。因为我已经改变了Windows的大小，所以右侧有空的地方（标有红色）。但事实并非如此。有两种选择。 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

上因此增加的问题时，请更具体。你想实现什么？你有什么限制和依赖。为什么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>