親コンテナがあり、その中に子コンテナがあります。2つの子コンテナはそれぞれ60%の幅と40%の幅を占めます。余白はなく、パディングもありますが、幅に含まれるようにボックスサイズを使用しています。しかし、何らかの理由で彼らは並んで座っていません。そのうちの1つを39%の幅に変更すると、問題なく表示されます。
私は何が間違っているのですか?
例はhttp://jsfiddle.net/Rcaet/で見ることができます
親コンテナがあり、その中に子コンテナがあります。2つの子コンテナはそれぞれ60%の幅と40%の幅を占めます。余白はなく、パディングもありますが、幅に含まれるようにボックスサイズを使用しています。しかし、何らかの理由で彼らは並んで座っていません。そのうちの1つを39%の幅に変更すると、問題なく表示されます。
私は何が間違っているのですか?
例はhttp://jsfiddle.net/Rcaet/で見ることができます
デフォルトでいくらかのスペースがあるdisplay:inline-blockを使用しています。これには、font-size:0ハックを使用する必要があります。次のように書きます。
.parent-container {
font-size:0;
}
.parent-container > div{
font-size:16px;
}
これをチェックしてくださいhttp://jsfiddle.net/Rcaet/8/
あなたは「間違った」ことを何もしていません。あなたborders
も取り上げwidth
ます。したがって、境界線があるということは、ボックスを小さくする必要があることを意味します。したがって、39%
。
フローティングを追加する必要があります。コンテナー 2 と 3 の両方に a を追加しfloat: left
ます。ただし、一部のブラウザーでは境界線の幅が原因で問題が発生する可能性があります。したがって、実際には、ボックスの 1 つを減らします。