Question

我打算安排图像

这是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 class statis size（高度：200px）的高度样式，那么我可以看到好结果。
而且我想设置高度风格自动为此，我必须只使用html和css

Answer 1

据我所知，您希望图像没有固定的高度，但您希望每一行都与最高的图像对齐。

为此，您需要在每个图像组周围添加包装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%;
}

See this fiddle

<强>更新

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

你可以尝试使用max-width:100%并删除高度，看看这里：http://jsfiddle.net/Kuy48/1/，除了你设定一个固定的高度之外，我没有别的想法，做你想做的事情/ p>

使用html和css进行图像放置

1 个答案: