css - CSS変数2列のレイアウト

Question

だから私はインターネットの至る所で物事を調べました、そして私は私が探している答えを見つけることができません。

ページ内のパーツに2列のレイアウトを作成しようとしています。各列は同じ幅で、コンテナの50％です。

何らかの理由で、両方のdivを50％に設定し、float：leftを設定すると、2番目のdivが下に折り返されます。私が得ることができる最も近いものは、2番目のdivを右にフロートさせ、幅を49％にすることですが、それらを接触させたいので、50％にします。

これがデモンストレーションです：

JSFiddleの例

だから私は何が間違っているのですか？

Answer 1

境界線の幅は1pxに設定されているため、2つのそれぞれに2pxが追加されますdiv。したがって、コンテンツの幅が4pxで、それに収まりませんdiv。

あなたがする必要があるのは、あなたdivのコンテンツを別のものの中に入れdiv、内側に境界線を適用することdivです。このフィドルで見られるように。

Answer 2

CSS3を使用するbox-sizing: border-box;

これを追加-

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing:border-box;

#infoと#textBooks

フィドル

Answer 3

DIVの境界を定義します。たとえば5のように幅を追加し0% + 2pxます。したがって、box-sizingを使用します。border-box;

このように書いてください：

div#textBooks,
div#info{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

これをチェックしてくださいhttp://jsfiddle.net/VbWbc/4/

注：IE8以降までは動作します。

すべてのブラウザ用

これをチェックしてくださいhttp://jsfiddle.net/VbWbc/5/ 次のように書いてください：

div#info{
    width:50%;
    border:1px solid black;
    background-color:red;
    float:left;
}

div#textBooks{
    border:1px solid black;
    background-color:green;
    overflow:hidden;
}