Here is the box one. </div> <div id="box2"> Here is the box two. "> Here is the box one. </div> <div id="box2"> Here is the box two. "> Here is the box one. </div> <div id="box2"> Here is the box two. " />

2列のCSSレイアウトとボックス内の列

ボックス1(box1)とボックス2(box2)の2つの列のページを作成したいと思います。次にh2の直後に、box2.1とbox2.2でbox2内に2つの列を作成します。

ここに私のHTMLコードです

<body>
  <div id="box1">
  

Here is the box one.

</div> <div id="box2">

Here is the box two.

<div id="box21">

Here is the box2.1

</div> <div id="box22">

Here is box 2.2

</div> </div> </body>

そしてここに私のCSSの部分があります。

#contentLeft{
float:left;
width:300px;

その後、私は何をすべきか分かりません。試した方法の数は、それは動作しませんでした。ここで助けてくれますか?

1

1 答え

それはあなたを助けるかもしれません:

HTML:

<div id="box1">
  

Here is the box one.

</div> <div id="box2">

Here is the box two.

<div id="box21">

Here is the box2.1

</div> <div id="box22">

Here is box 2.2

</div> </div>

CSS:

#box1{
    float:left;
    widht:50%;
    background:#FF0000;
}
#box2{
    float:left;
    width:50%;
    background:#00FF00;
}
#box21{
    float:left;
    width:50%;
    background:#0000FF;
}
#box22{
    float:left;
    width:50%;
    background:#e4e4e4;
}

あなたのリマインダーのために、idまたはクラス名に dot(。)を使用しないでください。すべてのdivで同じクラス名を使用して CSS を簡略化することもできます。

.box{
    float:left;
    width:50%;
}

または次のコード:

#box1, #box2, #box21, #box22{
    float:left;
    width:50%;
}

See the example : http://jsfiddle.net/N4hMw/2/

5
追加された
ありがとう@Arif。私はドット(。)がクラスを選択するために使用され、ID名として使用することは良い考えではないことを覚えています。ありがとうございました。私はこのコードを試します:)
追加された 著者 chhantyal,