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

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

Answer 2

尝试

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

Answer 3

您正在为div使用margin-left和margin-right，并且通过设置此项，您需要将宽度减少到总计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%;
}

Answer 4

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

因此，当你说25％+ 25％+ 50％时它可能是100％，但是有一个空间可以使它100％+ 5-6px并且它们不适合。修复很简单，将font-size: 0添加到父div（a.k.a #about_imagebar）

另一个问题是你的保证金，因为你使用％宽度你也应该使用％保证金。所以它应该是margin-right: 1%; width: 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%;
}

Answer 5

所以你的问题是box model的不足之处。保证金被添加到宽度，所以最终得到100％+ 10px，这显然不合适。一种选择是使用calc作为宽度，但确实有browser limitations。使用calc，您还可以简化HTML

HTML

<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>

CSS

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

Answer 6

相应地更新您的标记和css

HTML

<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>

CSS

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

Answer 7

请修改您的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%;
}

希望它能奏效！

100％宽度对齐三个图像

7 个答案: