框内有两列CSS布局和列 [英] Two column CSS layout and columns inside box
问题描述
我想用box 1（box1）和box two（box2）制作两列页面。然后在h2之后，我想用box2.1和box2.2在box2内创建两列。
这是我的HTML代码
< body>
< div id =box1>
< h1>以下是第一格。< / h2>
< / div>
< div id =box2>
< h2>以下是方块二。< / h2>
< div id =box21>
< p>以下是box2.1< / p>
< / div>
< div id =box22>
< p>以下是方框2.2< / p>
< / div>
< / div>
< / body>
这里是我的CSS部分。
#contentLeft {
float：left;
width：300px;
之后，我不知道该怎么做。尝试了一些方法，它没有工作。你可以在这里帮忙吗？
HTML：
< div id =box1>
< h1>以下是第一格。< / h2>
< / div>
< div id =box2>
< h2>以下是方块二。< / h2>
< div id =box21>
< p>以下是box2.1< / p>
< / div>
< div id =box22>
< p>以下是方框2.2< / p>
< / div>
< / div>
CSS：
＃box1 {
float：left;
widht：50％;
背景：＃FF0000;
}
＃box2 {
float：left;
宽度：50％;
背景：＃00FF00;
}
＃box21 {
float：left;
宽度：50％;
背景：＃0000FF;
}
＃box22 {
float：left;
宽度：50％;
背景：＃e4e4e4;
}
仅供您提醒，请勿使用点（。）标识或类名。您还可以通过在所有div中使用相同的类名来简化 CSS 。
.box {
float：left;
宽度：50％;
}
或以下代码：
＃box1，＃box2，＃box21，＃box22 {
float：left;
宽度：50％;
}
请参阅示例： http://jsfiddle.net/N4hMw/2/
I want to make two columns page with box one (box1) and box two(box2). Then just after h2, I want to make two columns inside box2 with box2.1 and box2.2.
Here is my HTML code
<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>
And here is my CSS part.
#contentLeft{
float:left;
width:300px;
After that, I have no idea what to do. Tried number of ways, it didn't work. Could you please help here?
It may help you:
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;
}
Just for your reminder, don't use dot(.) in id or class name. You can also simplified the CSS by using the same class name in all div.
.box{
float:left;
width:50%;
}
OR the following code:
#box1, #box2, #box21, #box22{
float:left;
width:50%;
}
See the example : http://jsfiddle.net/N4hMw/2/
这篇关于框内有两列CSS布局和列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
