Question

我想在行中显示任意数量的图像，其中每行包含3个固定宽度的图像。但是我希望行的高度与行中最高的图像的高度相同，类似于下图中块的布局。

目前我正在做这样的事情：

.ItemContainer{
    width: 200px;
    list-style-type: none;
}

.ItemContainer li{
    float: left;
}

.ItemContainer li img{
    width: 180px;
    margin: 10px 20px 10px 0;
}

然而，似乎浏览器试图填充空格而不是在行中显示它们，有没有办法只使用CSS来实现这种布局？

Answer 1

我认为你的结构是ul＆gt; li＆gt; img。

Flex会有所帮助： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

ul {
  display: flex;
  flex-wrap: wrap;
  width: 570px;/* width given to force wrapping */
  padding: 5px;
  margin: auto;
  background: gray;
}

li {
  display: block;/* remove bullet */
  width: 180px;
  margin: 5px;
  padding: 0;
}

img {
  width: 100%;/* fill whole width */
}

<ul>
  <li>
    <img src="http://lorempixel.com/200/400" />
  </li>
  <li>
    <img src="http://lorempixel.com/100/250" />
  </li>
  <li>
    <img src="http://lorempixel.com/200/300" />
  </li>
  <li>
    <img src="http://lorempixel.com/150/400" />
  </li>
  <li>
    <img src="http://lorempixel.com/200/200" />
  </li>
  <li>
    <img src="http://lorempixel.com/200/100" />
  </li>
</ul>

或者您可以处理float方式（CSS非常关闭以适应。块格式化上下文必须与IE7兼容。

处理浮动：https://css-tricks.com/all-about-floats/

关于BFC https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

ul {
  display: block;
  width: 570px;/* width given to force wrapping */
  padding: 5px;
  margin: auto;
  background: gray;
  overflow:hidden; /* triggers bfc to deal with float children */
}

li {
  display: block;/* remove bullet */
  float:left;
  width: 180px;
  margin: 5px;
  padding: 0;
}

img {
  width: 100%;/* fill whole width */
}

<ul>
  <li>
    <img src="http://lorempixel.com/200/400" />
  </li>
  <li>
    <img src="http://lorempixel.com/100/250" />
  </li>
  <li>
    <img src="http://lorempixel.com/200/300" />
  </li>
  <li>
    <img src="http://lorempixel.com/150/400" />
  </li>
  <li>
    <img src="http://lorempixel.com/200/200" />
  </li>
  <li>
    <img src="http://lorempixel.com/200/100" />
  </li>
</ul>

Answer 2

将包含块元素（示例中为div.row）内的每3个图像包裹起来，如下所示：

.row {
  border: solid 1px blue;
}
.row img {
  vertical-align: top;
}

<div class="row">
  <img src="http://lorempixel.com/200/100/" class="aa" />
  <img src="http://lorempixel.com/200/200/" class="bb" />
  <img src="http://lorempixel.com/200/120/" class="cc" />
</div>
<div class="row">
  <img src="http://lorempixel.com/200/30/" class="dd" />
  <img src="http://lorempixel.com/200/210/" class="ee" />
  <img src="http://lorempixel.com/200/140/" class="ff" />
</div>

Answer 3

试试这段代码：这是我在项目期间制作的东西，如果你想改变高度然后制作几个不同高度的块并将它们浮到左边但是要注意宽度等......

.part{
  background:;
  height:auto;
  width:%;
  float:right;
  padding-bottom:30px;
}
.block{
background-color:#ffd700;
float:left;
width: 200px;
height:300px;
border: 2px black;
padding-right:25px;
margin-top:3px;
margin-left:5px;
margin-right:35px;
color:black;
}

Answer 4

或者使用包装器div

＆＃13;

.wrapper {
  clear: left;
}
.ItemContainer{
  width: 200px;
}

.ItemContainer li{
  float: left;
  list-style-type: none;
}

.ItemContainer li img{
  margin-left: 10px;
}

＆＃13;

<div class="wrapper">
<ul class="ItemContainer">
<li><img src="http://placehold.it/50x150"></li>
<li><img src="http://placehold.it/50x100"></li>
<li><img src="http://placehold.it/50x50"></li>
</ul>
</div>
<div class="wrapper">
<ul class="ItemContainer">
<li><img src="http://placehold.it/50x150"></li>
<li><img src="http://placehold.it/50x100"></li>
<li><img src="http://placehold.it/50x50"></li>
</ul>
</div>

＆＃13;

CSS - 具有可变高度的等宽图像

4 个答案: