CSS：缩放浮动div宽度100％，直到2个浮动div的最小宽度可以适合宽度

我有一些CSS的麻烦，因为我不经常使用它。问题如下：我有多个相同大小的浮动对象。为了保持设计的响应，智能手机可能会垂直显示这些浮动对象。但是，在更大的屏幕上，浮动对象可能会彼此相邻显示。CSS：缩放浮动div宽度100％，直到2个浮动div的最小宽度可以适合宽度

为了最大限度地提高智能手机的可见度，浮动对象应该占据全部宽度（100％）。我添加了最小宽度和最大宽度。最大宽度是最小宽度的2倍。我们首先让浮动对象垂直对齐。当水平屏幕尺寸增加时，对象的宽度将填充屏幕，但一旦对象达到最大宽度，它应该以最小宽度显示其中另一个浮动对象的另一个，等等。有关如何完全做到这一点的任何想法？

非常感谢！

来源

2016-05-15 Hans

将Flexbox的模型是一个选择？任何如何，不要忘记提供HTML结构和CSS你到目前为止尝试过。我的水晶球碎成碎片 –

@Gyryrillus我想到了，但得出结论，只是解释问题就会更清楚。代码中包含更多与此无关的东西 – Hans

由于没有代码的使用，这里使用Flex和最小宽度一个简单的例子：

与min-width:300px 3个孩子，在这里我们有一个破发点，在900px，然后在600px的，那么身体就会显示滚动条宽度小于300px。 媒体查询在这里是不必要的。

body /* or whatever container you use */{ 
 
    display:flex; 
 
    flex-wrap:wrap; 
 
} 
 
div { 
 
    flex:1; 
 
    min-width:300px;/* first break point at 300px x number of divs */ 
 
    background:turquoise; 
 
} 
 
div + div { 
 
    background:tomato; 
 
} 
 
div:last-of-type { 
 
    background:gold; 
 
}

<div>one</div> 
 
<div>two</div> 
 
<div>three</div>

codepen to play with

来源

2016-05-15 14:32:23

看起来像我正在寻找的东西！再次感谢 – Hans

CSS：缩放浮动div宽度100％，直到2个浮动div的最小宽度可以适合宽度

回答

相关问题