2

在 CSS 中对事物进行平均间隔是相对简单的。还有很多关于堆栈溢出的问题，但它没有解释的一件事是如何在每个框之间放置空格（或左边距和右边距）。

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

我觉得我通过使用三个不同命名的 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/

4

3 回答 3

0

当您将 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%;

于 2012-06-04T06:38:21.743 回答
0

这里的问题是宽度的总和大于包含元素的总宽度 (3 x 33,33%) + (3 x 20px) 将始终大于 100% ！

你可以这样做：

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

这篇文章对这个问题有很好的解释：如何使用 CSS 水平分布元素

于 2012-06-04T07:04:30.223 回答
0

我觉得最好的方法是将边距设置为 5%。这是 jsfiddle：http: //jsfiddle.net/dwbed/

于 2012-08-10T07:55:31.940 回答