html - 每个 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(可行):

http://jsfiddle.net/JsA25/

两个 div(损坏):

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；结果:损坏的 UI

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