每个div之间的间距为33％。是否可以压缩我的代码？

Question

在CSS中平衡事物相对简单。有关堆栈溢出的问题也很多，但有一点不能解释的是如何在每个框之间放置空格（或margin-left和margin-right）。

为了说明，这就是我想要完成的事情：

我觉得我通过使用三个不同命名的div来实现这一目标需要很长的路线：

CSS：

#moreinfobar
{

}
#moreinfobarbox
{
float:left;
width:33.33%;
}
#moreinfobarbox-info
{
margin:0 20px;
background-color:#ffffff;
-webkit-box-shadow:  0px 0px 5px 1px #000000;
box-shadow:  0px 0px 5px 1px #000000;
}

HTML：

<div id="moreinfobar">

                <div id="moreinfobarbox"><div id="moreinfobarbox-info">Test1</div></div>
                <div id="moreinfobarbox"><div id="moreinfobarbox-info">Test2</div></div>
                <div id="moreinfobarbox"><div id="moreinfobarbox-info">Test3</div></div>


            </div>

我试图让它与两个单独的名称div一起工作无济于事。是否可以压缩我的代码？

的jsfiddle：

三个div（WORKS）：

http://jsfiddle.net/JsA25/

两个div（BROKEN）：

http://jsfiddle.net/TxT4T/1/

Answer 1

当其父元素具有固定宽度时，将Margin + Width赋予任何子元素。边距为元素创建外部空间 - 结果：破坏的UI。

<div style="width:400px;">
  <div style="width:200px; float: left; margin: 0 0 0 20px;">One</div> <!--Total space required: 220px; [disturbed UI]-->
  <div style="width:200px; float: left; margin: 0 0 0 20px;">Two</div> <!--Total space required: 220px; [disturbed UI]-->
</div>

家长有 - 400px ;

子元素被非法侵入40px - 440px ;结果：用户界面破碎

你只需要减小宽度。在您的情况下，请保留width:26.33%;

Answer 2

这里的事情是宽度的总和大于包含元素的总宽度 （3 x 33,33％）+（3 x 20px）将始终大于100％！

你可以这样做：

.moreinfobarbox
{
 float:left;
 width:30.33%;
 margin-left:1.5%;
 margin-right:1.5%;
}

本文对问题进行了很好的解释：How to distribute elements horizontally using CSS

Answer 3

我觉得最好的方法是将保证金设定为5％。这是jsfiddle：http://jsfiddle.net/dwbed/