Html 100%宽度对齐三个图像

我试图得到三个图像，以适应在一个100%的宽度div。我想有保持每个图像之间5px的边缘。有什么建议吗

css:

html:

谢谢

试试看

#about_imagebar > div {
   display: inline;
   padding-right: 5px;
}

---

您正在为div使用左边距和右边距，通过设置此选项，您需要将总宽度减少到100%，因为它会添加空格，并将宽度从100%增加到加上边距值：

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

---

元素设置为

显示：内联块

。 这意味着它们也被视为内联元素。内联元素在它们之间使用空格

所以，当你说25%+25%+50%时，它可能是100%，但有一个空间将使它成为100%+5-6px，它们将不适合。修复方法很简单，将

字体大小：0

添加到父div（又称

#about_imagebar

）

另一个问题是您的边距，因为您使用的是%width，所以您也应该使用%margin。 所以应该是

marginright: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%;
}

---

所以，你的问题是对这个问题的不理解。边距被添加到宽度中，因此最终得到100%+10px，这显然不合适。一种选择是对宽度使用

calc

，但它确实有。使用它还可以简化HTML

HTML

---

相应地更新标记和css

HTML

---

请修改您的css，如下所示：

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


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

---

希望它能起作用

尝试填充：5px；它将在所有关于所有关于所有儿童的图片栏中保留5px的空间感谢所有快速答案！现在它开始工作了-D@user2220758，没问题。请单击答案左侧的“检查”按钮，接受对您有效的答案。

#about_imagebar {
    width:100%;
    margin-top:5px;
    padding:5px; /* or 0 5px if you don't need a top and bottom padding */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
#about_left {
   display:inline-block;
   width:25%;
}
#about_middle {
   display:inline-block;
   margin:0 auto;
   width:50%;
}
#about_right {
   display:inline-block;
   width:25%;
}

#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%;
}

<div id="about_imagebar">    
    <img src="images/about_banner_1.jpg" class="left" />   
    <img src="images/about_banner_3.jpg" class="middle" />    
    <img src="images/about_banner_2.jpg" class="right"/>
</div>

#about_imagebar {
    width:100%;
    margin-top:5px;
}

 #about_imagebar .left {       
   float:left;
   margin-right:5px;
   width:calc(25% - 5px);
}

#about_imagebar .middle {
   display:block;
   float:left;
   width:50%;
}

#about_imagebar .right {
   float:right;
   margin-left:5px;
   width:calc(25% - 5px);
}

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

#about_imagebar { width:100%; margin-top:5px;}
#about_imagebar div {background:#ccc} /* I have used for just view the DIV, you can remove it */
#about_left { display:inline-block; width:calc(25% - 5px);}
#about_middle { display:inline-block; width:50%; }
#about_right { display:inline-block; width:calc(25% - 5px);}

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


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