Question

我试图在一个块中对齐3个图像。它们必须放在相同大小的容器中并水平放置。

以下是代码：

<div class="container">
   <img src="http://images2.webydo.com/31/313624/3958/21b785db-14ea-42f7-af0d-7e7a8d8019d9.jpg" />
   <img src="http://images2.webydo.com/31/313624/3958/9657ddfd-81e8-4154-bc61-bbe30e4a8740.jpg" />
   <img src="http://images2.webydo.com/31/313624/3958/909af36d-b941-4a20-9441-20505c035da3.jpg"/>
</div>


.container {
    width: 300px;
    height: 200px;
    position:relative;
    float: left;
    text-align: center;
}
.container img {
    width: 100%;
    height: auto;
    margin: 5px;
}

Answer 1

在我的CSS解决方案中，我将＆＃34;容器＆＃34;类宽度为3（300px / 3），然后减去10px（我从每个图像的填充左侧和填充右侧获得）。因此，单个图像的宽度应为90px。但是，我还想为浏览器间距减去5px以上，因此每个图像的总宽度应为85px。这是代码：

<html>
<head>
<style>
.container {
    width: 300px;
    height: 200px;
    position:relative;
    float: left;
    text-align: center;
}
.container img {
    width: 85px;
    height: auto;
    margin: 5px;
}
</style>
</head>
<body>
<div class="container">
   <img src="http://images2.webydo.com/31/313624/3958/21b785db-14ea-42f7-af0d-7e7a8d8019d9.jpg" />
   <img src="http://images2.webydo.com/31/313624/3958/9657ddfd-81e8-4154-bc61-bbe30e4a8740.jpg" />
   <img src="http://images2.webydo.com/31/313624/3958/909af36d-b941-4a20-9441-20505c035da3.jpg"/>
</div>
</body>
</html>

Answer 2

嗯......如果你给他们全部width:100%，我认为你不能把所有三幅图像放在水平线上。该属性将导致每个图像占据容器的整个宽度，这意味着每个图像将被推送到下一行。

您必须为图像提供较小的宽度，以便将它们全部放在一条线上。 100％/ 3 = 33.3％（四舍五入），所以请改用它。这里有一些似乎有用的.container img修改过的CSS：

.container img {
    width: 33.3%;
    height: auto;
    padding:5px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}

请注意，除了更改图像之外＆＃39;宽度，我还将margin更改为padding，并使用了box-sizing属性（详细了解here）。这使您可以在图像周围保持相同的5px间距，而不会将任何图像撞到第二行。

此外，HTML需要略微改变。在这种情况下，我们会利用<img>元素的默认display:inline-block将它们全部显示在同一行上。但是，这种元素之间的任何空格都会在图像之间产生空间，因此需要消除：

<div class="container">
   <img src="http://images2.webydo.com/31/313624/3958/21b785db-14ea-42f7-af0d-7e7a8d8019d9.jpg" /><img src="http://images2.webydo.com/31/313624/3958/9657ddfd-81e8-4154-bc61-bbe30e4a8740.jpg" /><img src="http://images2.webydo.com/31/313624/3958/909af36d-b941-4a20-9441-20505c035da3.jpg"/>
</div>

如果您不理解我的意思，请尝试将每个<img>元素格式化为HTML中自己的行，并查看它如何影响其定位。

这里是JSFiddle所以你可以看到它实现的目标。如果您有任何问题，请告诉我，我们乐意为您提供进一步的帮助！

编辑：或者，如果您确实希望在HTML中的<img>元素之间保留空格，则可以使用负边距补偿不需要的额外空间。只需将margin-right:-4px;添加到.container img的样式中即可。更新了JSFiddle以显示其结果。

水平对齐容器中的图像

2 个答案: