0

ここで流動的なレイアウトの簡略版を作成しました: http://jsfiddle.net/persianturtle/8UZjz/5/右の列がその上のヘッダーと正確に一致しない理由を理解しようとしています。ゼロパディングがあります。国境は同じです。私は何かが欠けているに違いありませんが、私の人生では何が変位を引き起こしているのかを理解することはできません.

明確にするために: 3 つの列の間のスペースを均等にするつもりはありません。右の列がその上のヘッダーのように画面の右端に並んでいても、それらは同じです。

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 に答える