列中的兩列CSS佈局和列

我想使用box 1（box1）和box two（box2）創建兩列頁面。然後在h2之後，我想用box2.1和box2.2在box2內創建兩列。列中的兩列CSS佈局和列

這裏是我的HTML代碼

<body> 
    <div id="box1"> 
    <h1>Here is the box one.</h2> 
    </div> 

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

     <div id="box21"> 
     <p>Here is the box2.1</p> 
     </div> 

     <div id="box22"> 
     <p>Here is box 2.2</p> 
     </div> 
    </div> 
</body>

這裏是我的CSS的一部分。

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

之後，我不知道該怎麼做。嘗試了一些方法，它沒有工作。你能幫忙嗎？

來源

2011-11-25 chhantyal

它可以幫助你：

HTML：

<div id="box1"> 
    <h1>Here is the box one.</h2> 
    </div> 
    <div id="box2"> 
    <h2>Here is the box two.</h2> 
     <div id="box21"> 
     <p>Here is the box2.1</p> 
     </div> 
     <div id="box22"> 
     <p>Here is box 2.2</p> 
     </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%; 
}

OR以下代碼：

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

參見例如：http://jsfiddle.net/N4hMw/2/

來源

2011-11-25 10:54:10

由於@Arif。我記得點（。）是用來選擇類和使用它作爲ID名不是一個好主意。謝謝。我會試試這個代碼:) – chhantyal

列中的兩列CSS佈局和列

回答

相關問題