html - 我如何保持一行 HTML 元素流畅，但确保它们每行具有相同的元素

Question

我在一个父元素中有一组 6 个元素。这 6 个元素需要足够流畅，以便当它们的父元素最短时，元素堆叠成 6 行，每行一个。随着父元素被拉伸(stretch)，它们开始均匀堆叠，因此唯一可能的组合将是 6 行 1、2 行 3、3 行 2 或 1 行 6。

我有一个 JSBin，我一直试图在其中证明这一点，但收效甚微； http://jsbin.com/mawomu/2/edit .

Answer 1

用@media完成@deebs的建议

http://jsbin.com/jehequna/1/edit

这是高度“易变”的，因为它取决于边框、边距和填充宽度。

@media screen and (min-width: 330px){
  .items li
    {
      min-width: 100px; 
    }  
}
@media screen and (min-width: 363px){
  .items li
    {
      min-width: 113px; 
    }  
}
@media screen and (min-width: 477px){
  .items li
    {
      min-width: 151px; 
    }
}
@media screen and (min-width: 630px){
  .items li
    {
      min-width: 100px; 
    }
}