Question

如何在div中生成一行图像？我的目标是拥有一系列图像（以网页为中心），根据屏幕的大小进行缩放。我现在直到的（2）解决方案都像this，但还不够好。我试着：

将其置于页面的中心
当屏幕较小（智能手机）时，图像应该变小
留在一行，所以不要通过调整大小来处于垂直线条
在多个图片之间留一个空格
原始图像的大小无关紧要。

我不是编程大师，所以......

提前致谢，

丹尼斯

<div style="width: 100%; clear: center;">
<div style="text-align: center;"><a class="hoverborder" href="" rel="alternate"><img class="img-rounded" src="http://placehold.it/150x150" alt="" width="100" height="70" /></a>

<div style="float: left; text-align: center;"><a class="hoverborder" href="index.php?Itemid=319" rel="alternate"><img class="img-rounded" src="http://placehold.it/150x150" alt="" width="100" height="70" /></a></div>
<div style="float: left; text-align: center;"><a class="hoverborder" href="index.php?Itemid=318" rel="alternate"><img class="img-rounded" src="http://placehold.it/150x150" alt="" /></a></div>
<div style="float: left; text-align: center;"><a class="hoverborder" href="index.php?Itemid=321" rel="alternate"><img class="img-rounded" src="http://placehold.it/150x150" alt="" /></a></div>
<div style="float: left; text-align: center;"><a class="hoverborder" href="index.php?Itemid=322" rel="alternate"><img class="img-rounded" src="http://placehold.it/150x150" alt="" /></a></div>

Answer 1

有很多方法可以实现这一目标。它们在某种程度上取决于页面中图像的内容。我倾向于避免花车，因为它们会带来其他挑战，而且根本不是必需的。

＆＃13;

.image-row {
    text-align: center;
}
.image-box {
    width: 20%;
    padding: 1%;
    margin: .5%;
    background: pink;
    display: inline-block;
    font-size: 0; /* fixes bottom padding */
}
.image-box img {
    max-width: 100%;
}

＆＃13;

<div class="image-row">
    <div class="image-box">
        <img src="http://placehold.it/500x500" />
    </div>
    <div class="image-box">
        <img src="http://placehold.it/800x500" />
    </div>
    <div class="image-box">
        <img src="http://placehold.it/500x500" />
    </div>
    <div class="image-box">
        <img src="http://placehold.it/500x200" />
    </div>
</div>

＆＃13;

<强> Fiddle demo

如何使用div使多个图像居中水平并响应？

1 个答案: