Question

我的目标是创建一个内容包装器，每个项目的高度/宽度相等。仅这一点很容易，并在下面进行了演示，但如果它们缩小到min-width以下，我希望将这些项目（DIV＆＃39; s）换行到另一行，这样它在移动显示器上看起来不会压缩。

我想jQuery可以处理这个，但为了简单和大小，我想看看是否只有css解决方案。

＆＃13;

#wrapper {
    display: table;
    table-layout: fixed;
    
    width:90%;
    height:100px;
    background-color:Gray;
}
#wrapper div {
    display: table-cell;
    height:100px;
    min-width:200px;
}

#one {
    background-color:green
}
#two {
    background-color:blue
}
#three {
    background-color:red
}

＆＃13;

<div id="wrapper">
    <div id="one">one one one one one one one one one one one one one one one one one one one one one</div>
    <div id="two">two two two two two two</div>
    <div id="three">three</div>
</div>

＆＃13;

有关实施的一些细节：

这是针对图标网格类型的登录页面，存在的项目数是动态的，页面的尺寸也是如此。由于物品包装的垂直滚动很好，但我不希望有任何水平滚动。

Answer 1

您可以使用Flexbox和flex-wrap: wrap执行此操作，此处为Fiddle

#wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  height: 100px;
  background-color: Gray;
}
#wrapper div {
  flex: 1;
  height: 100px;
  min-width: 200px;
}
#one {
  background-color: green
}
#two {
  background-color: blue
}
#three {
  background-color: red
}

<div id="wrapper">
  <div id="one">one one one one one one one one one one one one one one one one one one one one one</div>
  <div id="two">two two two two two two</div>
  <div id="three">three</div>
</div>

Answer 2

从我的评论中

不要使用display：table属性，行上的单元格不要换行，flex会做;）

#wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  height: 100px;
  background-color: Gray;
}
#wrapper div {
  height: 100px;
  min-width: 200px;
  flex: 1;
}
#one {
  background-color: green
}
#two {
  background-color: blue
}
#three {
  background-color: red
}

<div id="wrapper">
  <div id="one">one one one one one one one one one one one one one one one one one one one one one</div>
  <div id="two">two two two two two two</div>
  <div id="three">three</div>
</div>

是否只能使用CSS容器包装器？

2 个答案: