html - 100%宽度对齐三张图片

Question

我正在尝试让三个图像适合 100% 宽度的 div。我想在每张图片之间保留 5px 的边距。有什么建议么？

CSS:

#about_imagebar {
    width:100%;
    margin-top:5px;
}
#about_left {
   display:inline-block;
   float:left;
   margin-right:5px;
   width:25%;
}
#about_middle {
   display:block;
   margin:0 auto;
   width:50%;
}
#about_right {
   display:inline-block;
   float:right;
   margin-left:5px;
   width:25%;
}

html:

<div id="about_imagebar">
    <div id="about_left">
        <img src="images/about_banner_1.jpg" />
    </div>
    <div id="about_right">
        <img src="images/about_banner_3.jpg" />
    </div>
    <div id="about_middle">
        <img src="images/about_banner_2.jpg" />
    </div>
</div>

谢谢!

Answer 1

您的元素设置为display: inline-block。 这意味着它们也被视为内联元素。内联元素在它们之间使用空格。

因此，当您说 25% + 25% + 50% 时，它可能是 100%，但存在使它成为 100% + 5-6 像素的空间，它们不适合。修复很简单，将 font-size: 0 添加到父 div(又名 #about_imagebar)

另一个问题是您的边距，因为您使用的是 % 宽度，所以您也应该使用 % 边距。 所以应该是 margin-right: 1%;宽度:例如 24% 或者您可以正确计算它。

在代码中:

#about_imagebar {
    width:100%;
    margin-top:5px;
    font-size: 0;
}
#about_left {
   display:inline-block;
   float:left;
   margin-right:1%;
   width:24%;
}
#about_middle {
   display:block;
   margin:0 auto;
   width:50%;
}
#about_right {
   display:inline-block;
   float:right;
   margin-left:1%;
   width:24%;
}