CSS盒子模型 - 我必须缺少的东西 [英] CSS Box Model Puzzle - I must be missing something

问题描述

我在这里创建了我的流体布局的简化版本： http://jsfiddle.net/persianturtle / 8UZjz / 5 / ，我想弄清楚为什么右列不准确排列上面的标题。有零填充。边界是一样的。我必须缺少一些东西，但我不能为我的生活弄清楚是什么导致了位移。

I have created a simplified version of my fluid layout here: http://jsfiddle.net/persianturtle/8UZjz/5/ and I am trying to figure out why the right column does not line up exactly with the header above it. There is zero padding. The borders are the same. I must be missing something but I can't for the life of me figure out what is causing the displacement.

要清楚：我不是想让空间之间的三列甚至。即使右边的列在屏幕的右边缘，如上面的标题排列，它们也会是。

To be clear: I am not looking to make the space between the three columns even. They would be even if the right column would line up at the right edge of the screen like the header above it.

html代码如下：

 <div id="pagewidth">

<div class="twocols">
  <div class="box content">
  <ul>
   <li>two</li>
   <li>two</li>
   <li>two</li>
   <li>two</li>
   <li>two</li>
   <li>two</li>
  </ul>
  </div>  <!--Closes Content-->


<div class="box rightcol">
<ul>
   <li>three</li>
   <li>three</li>
   <li>three</li>
   <li>three</li>
   <li>three</li>
   <li>three</li>
 </ul>
 </div>   <!--Closes rightcol-->
 </div>   <!--Closes twocols-->

 <div class="box leftcol">
 <ul>
   <li>one</li>
   <li>one</li>
   <li>one</li>
   <li>one</li>
   <li>one</li>
   <li>one</li>
 </ul>
 </div>   <!--Closes leftcol-->

/ p>

And the CSS:

body{
    background-color:#e8f1c4;  
}

header{
    height:245px;
    width:100%;
}

#pagewidth{
    position:relative;
    margin:0 auto;
    width:95%;  
    min-width:980px;
    max-width:1450px;
}

.box{
    background:#ffffff;
    border:2px solid #bcd78d;
    border-radius:15px;
    -moz-border-radius:15px; /* Old Firefox */
    -webkit-border-radius: 15px;
    margin-top:5px;
}

.leftcol{
    width:24.5%; 
    float:left; 
    position:relative;
}

.twocols{
    width:74.5%; 
    float:right; 
    position:relative;
}

.rightcol{
    width:31.65772%; 
    float:right; 
    position:relative; 
}

.content{  
    float:left; 
    display:inline; 
    position:relative; 
    width:67%; 
}

推荐答案

边框't 相同。您的标题是100％宽的边框。其他容器在不毗邻的容器内。 box-sizing 属性可以帮助你：

The borders aren't the same. Your header is 100% wide with borders. The other containers are within a container that isn't bordered. The box-sizing property can help you out here:

http://jsfiddle.net/8UZjz/12/

.box{
    background:#ffffff;
    border:2px solid #bcd78d;
    border-radius:15px;
    -moz-border-radius:15px; /* Old Firefox */
    -webkit-border-radius: 15px;
    margin-top:5px;
    box-sizing: border-box; /* needs prefixes for webkit/moz */
}

这篇关于CSS盒子模型 - 我必须缺少的东西的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！