CSS:比例浮动div宽度100%，直到2个最小宽度的浮子div可以适应这个宽度。
CSS:比例浮动div宽度100%，直到2个最小宽度的浮子div可以适应这个宽度。
提问于 2016-05-15 14:21:42
我在CSS上遇到了一些麻烦，因为我没有经常使用它。问题是:我有多个大小相同的浮点对象。为了保持设计响应性，智能手机可能会垂直显示这些浮点对象。不过，在较大的屏幕上，浮动对象可能会显示在彼此的旁边。
要使智能手机上的可见性最大化，浮动对象应该占据所有宽度(100%)。我加了一个最小宽度和一个最大宽度。最大宽度是最小宽度的2倍.我们首先让浮点对象垂直对齐。当水平屏幕尺寸增加时，对象的宽度就会填充屏幕，但是当对象达到最大宽度时，它就应该在另一个浮动对象旁边显示2个最小宽度的对象，以此类推。知道该怎么做吗？
非常感谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-05-15 14:32:23
由于没有要使用的代码，这里有一个简单的使用flex和最小宽度的示例：
在min-width:300px有3个孩子，这里我们有一个断点在900 at，然后在600 at，然后身体将显示一个滚动条低于300 at宽度。在这里，中介是没有必要的。
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>
可供玩的代码
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37239391
复制相关文章
相似问题
腾讯云开发者
