1 
<div id="container">
  <div id="top"></div>
  <div id="left"></div>
  <div id="right"></div>
  <div id="clear"></div>
</div>

#container{
  width:200px;
  margin-left:auto;
  margin-right:auto;
  margin-top:50px;   
}

#top{
  width:200px;
  height:20px;
  border:medium ridge #FFF;
}
#left{
  float:left;
  width:50px;
  height:20px;
  border:medium ridge #FFF;
}
#right{
  float:right;
  width:40px;
  height:20px;
  border:medium ridge #FFF;
}
#clear{
  clear:both;  
}

なぜ#rightと#topが正しく整列されていないのですか？

4

3 に答える 3

3

これは、top要素が実際にコンテナの境界をオーバーフローしているのに対し、浮動要素rightはそれに制限されているためです。境界線が幅に含まれていないため、要素topがオーバーフローしています。containerつまりtop、実際には204pxを占めています。

例で説明されている問題：http：//jsfiddle.net/KhJ6e/2/

修正するtopには、両側の2pxの境界線を考慮して調整します。（コンテナの幅から4を引く）またはauto意図に応じて幅を指定します。

#top{
    width:196px;
    height:20px;
    border:medium ridge #FFF;
}

例： http： //jsfiddle.net/KhJ6e/1/

于 2012-12-08T15:12:12.723 に答える
2

上部は親コンテナよりも幅が広い

#top{
  width:auto;
}
于 2012-12-08T15:13:51.460 に答える
1

問題は、ボックスモデルの幅の計算方法です。画面上のすべての要素には、コンテンツ、パディング、境界線、マージンの4つのコンポーネント（内側から外側）があります。デフォルトでは、幅にはコンテンツのみが含まれます。境界線を追加すると、上部が200ピクセルより大きくなります。Chromeの開発ツールを使用すると、206pxとしてレンダリングされていました。

考えられる解決策は2つあります。1つは幅をファッジするか、2つはボックスモデルを変更することです。最初のものは機能しますが、維持するのは困難です。小さな変更は、配置を台無しにする可能性があります。

より良い解決策は、を使用することbox-sizing: border-boxです。そのCSSスタイルを追加することにより、width属性にはコンテンツ、パディング、および境界線が含まれます。したがって、元々はパディングとボーダーが外側を包み込みますが、ボーダーボックスを使用すると、内側に侵入します。

于 2012-12-08T15:34:20.893 に答える