0

我在这里创建了我的流体布局的简化版本：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-->

​</p>

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

2 回答 2

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 */
}
于 2012-12-31T00:52:11.557 回答
0

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

 <div class="box">
     <header>
     </header>
 </div>
于 2012-12-31T00:48:23.370 回答