我正在开发一个简单的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，但即使它那是。我怎样才能让他们免于凌驾对方？

来源

2013-12-10 Orel Bitton.

把你的代码在这里，在这个问题，但保留链接小提琴。 –

@RobertHarvey +，jsFiddle链接仍然非常有用。 – brandonscript

@RobertHarvey谢谢，刚刚更新了帖子。 –

原因很简单元素的宽度不上。

的填充/边界在元件的宽度进行计算，因此：

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

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

jsFiddle example

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

还有一个问题，但，因为每个元件具有1px每侧一个outline。

我建议将其更改为border，从而解决问题。可以使用从元素宽度中减去填充/边框。

jsFiddle example

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

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

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

来源

2013-12-10 20:49:42

此外，OP还包含一个'outline'属性，它不包含在'border-box'中，并且公告词打破了宽度，因为它太长了 – DaniP

@Danko感谢您指出这一点......我什至都看不到它因为它太轻。 –

@JoshC非常感谢，我现在明白我的错误，并知道如何解决它。 –

这是因为子每个的.block元件浮起的div以及居中之一，则正在声明100％的宽度（因此继承父母的宽度）在宽度和额外6像素（3PX左和右填充）。这会导致内容溢出，因为您要在100％宽度上添加6px。

为了解决这个问题，声明box-sizing: border-box上.block：

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

来源

2013-12-10 20:49:13 Terry

元素进入彼此

HTML

CSS

回答

相关问题