Question

我在这里创建了流体布局的简化版本：http://jsfiddle.net/persianturtle/8UZjz/5/我试图弄清楚为什么右列与上面的标题不完全对齐。没有填充。边界是一样的。我必须遗漏一些东西，但我不能为我的生活找出导致流离失所的原因。

要明确：我不打算在三列之间建立空间。即使右列在屏幕的右边缘排列，就像上面的标题一样，它们也是如此。

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

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%; 
}

Answer 1

边框不是相同。您的标题是100％宽的边框。其他容器位于没有边界的容器内。 box-sizing属性可以帮助您：

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 */
}

Answer 2

问题在于标题的边框，它会增加标题的整体宽度，但只会在右侧。您可以尝试使用div包装标题并应用box类：（jsfiddle）

 <div class="box">
     <header>
     </header>
 </div>

CSS Box模型拼图 - 我必须遗漏一些东西

2 个答案: