html - 使用 html 和 css 放置图像

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 的高度样式(ex height: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/ , 除非你设置一个固定的高度，否则我想不出其他方法来做你想做的事