0

我要整理图片

这是html代码

<div class="imagearea">
    <img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
    <img class="subimg" src="http://www.tawbaware.com/maxlyons/sample_JPEG.jpg" />
    <img class="subimg" src="http://www.tawbaware.com/maxlyons/sample_JPEG.jpg" />
    <img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
    <img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
    <img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
    <img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
    <img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
    <img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
    <img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
    <img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
    <img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
</div>

CSS代码

<style>
    .imagearea{
        width:100%;
        position:absolute;
    }

    .subimg{
        width:200px;
        height:auto;
        float:left;
    }
</style>

我要排列图像
当图像换行时，下一行的子图像被排列到顶部图像的图像（高度最小）。
您可以在http://jsbin.com/ezoyag/1/edit
中查看它 但是如果我设置了 subimg 类统计大小的高度样式（例如高度：200px），那么我可以看到好的结果。
我想将高度样式设置为自动。
为此，我只需要使用 html 和 css

4

1 回答 1

0

据我了解，您希望图像没有固定的高度，但您希望每条线都与最高图像对齐。

为此，您需要在每个图像组周围添加一个包装器 div：

<div class="imagearea">
  <div class="row">
    <img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
    <img class="subimg" src="http://www.tawbaware.com/maxlyons/sample_JPEG.jpg" />
    <img class="subimg" src="http://www.tawbaware.com/maxlyons/sample_JPEG.jpg" />
  </div>
  <div class="row">
    <img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
    <img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
    <img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
  </div>
   ...
</div>

并添加到 css：

.row{
float: left;
width: 100%;
}

看到这个小提琴

更新

将高度设置为自动时，您告诉图像根据宽度缩放高度，因此它将保持纵横比，浏览器控制它，并且图像可能看起来比您预期的要短。

您可以尝试使用max-width:100%并删除高度，请看这里：http: //jsfiddle.net/Kuy48/1/，除非您设置固定高度，否则我想不出其他方法来做您想做的事

于 2013-08-05T09:36:45.277 回答