Question

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

为了最大限度地提高智能手机的可见性，浮动物体应占据所有宽度（100％）。我添加了最小宽度和最大宽度。最大宽度是最小宽度的2倍。我们首先将浮动对象垂直对齐。当水平屏幕尺寸增加时，对象的宽度会填满屏幕，但是一旦对象达到最大宽度，它应该显示其中2个浮动对象旁边的最小宽度，依此类推。关于如何做到这一点的任何想法？

非常感谢你！

Answer 1

由于没有代码可以使用，这里有一个简单的flex和min-width示例：

在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

CSS：scale float div width 100％，直到min-width的2个float div可以适合宽度

1 个答案: