元素相互进入

Question

我正在开发一个简单的 css 主题，我使用左中右布局，我使用 float 来定位左右元素，margin 用于中心。 但是如果我看一下这个网站，所有的网站部分都在相互渗透。

这是我现在所拥有的：

HTML

<div class="container">
    <div class="right">
        <div class="block">
            <div class="title">My Block Of Data Here Is Title</div>
            This is my block of data! Here i can show website stats and announcements.
        </div>
    </div>
    <div class="left">
        <div class="block">
            <div class="title">My Block Of Data Here Is Title</div>
            This is my block of data! Here i can show website stats and announcements.
        </div>
    </div>
    <div class="center">                
        <div class="block">
            <div class="title">Welcome to SITE_TITLE_HERE!</div>
            This is where we post so many stuff!<br><br><br><br><br><br><br><br><br><br>Thanks, SITE_TITLE_HERE stuff.
        </div>
    </div>
</div>

CSS

body{
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 18px;
}

.container{
    margin: 0 auto;
    width: 65%;
}   

.left{
    float: left;
    width: 20%;
}   

.right{
    float: right;
    width: 20%;
}

.center{
    margin: 0 auto;
    width: 60%;
}

.block{
    width: 100%;
    padding: 3px;
    background: #fafafa;
    outline: 1px solid #f2f2f2;
    outline-offset: 2px;
    text-align: center;
}

.block .title{
    font-size: 24px;
    border-bottom: 1px solid #000;
    background: #76E0EE;
}

小提琴： http://jsfiddle.net/XK6dN/2/

更新：我几乎可以肯定它是块类的outline，但即使是这样。我怎样才能防止它们相互覆盖？

Answer 1

这是因为对于每个浮动 div 以及居中 div 的子 .block 元素，您声明了 100% 的宽度（因此继承了父母的宽度）和在宽度（3px 左右填充）。这会导致内容溢出，因为您在 100% 宽度之上添加了 6px。

要解决此问题，请在 .block 上声明 box-sizing: border-box：

.block {
    box-sizing: border-box; /* Makes magic happen */
    width: 100%;
    padding: 3px;
    background: #fafafa;
    outline: 1px solid #f2f2f2;
    outline-offset: 2px;
    text-align: center;
}

这不是魔法本身，但是通过使用border-box box model，您将强制 100% 的宽度包括所有可能的装饰，包括轮廓、边框和填充，被考虑在内在计算最终宽度时。

http://jsfiddle.net/XK6dN/3/

Answer 2

这只是因为元素的宽度没有相加。

内边距/边框是按元素的宽度计算的，因此：

20% + 20% + 60% + 6px（填充）+ 2px（边框）!= 100%。

您可以使用属性box-sizing 更改元素的盒子模型，以在其宽度计算中包含填充/边框。

jsFiddle example

.block{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

但仍然存在问题，因为每个元素的每一侧都有一个 outline 或 1px。

我建议将其更改为border，从而解决问题。

或者，您可以使用calc() 从元素宽度中减去填充/边框，而不是使用box-sizing。

jsFiddle example

.left{
    float: left;
    width: calc(20% - 8px);
}   

.right{
    float: right;
    width: calc(20% - 8px);
}

.center{
    margin: 0 auto;
    width: calc(60% - 8px);
}