容器中子元素的可调宽度

Question

There is parent container with child elements:

 .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> 

I need to put all items one by one. And they have to have max available width (in specified range) when container is resized. What might be solution? flexbox is not an option. Also items are generated by Angular and can be any number. I have attahced screen. There is empty place on the right side (marked with red) since I have changed windows size. But it hasn't be. There are two options. 1) New item is added if thre is enough room 2) width of all items are correlated so that there is no empty space.

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>

just change the css to be like that

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

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

Answer 2

Please be more specific when adding questions on SO. What do you want to achieve? What are your limitations and dependencies. Why is flexbox no option? (Just remember it for the next time)

1. Remove display:inline from the container!
2. Create the desired amount of columns (in this example) three.
3. Create elements ( .box ) inside them with the desired max/min-width
4. Center the .box elements inside the columns with margin:0 auto ;
5. You have now a "mostly" flexible grid (without 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>