如何重置嵌套div之间的父子关系

时间:2010-03-08 11:17:13

标签: css

我是CSS设计的新手,并不了解CSS的大部分属性。我正在为网页创建一个布局。我在布局中使用div。

我的结构有点像这样

                <div id="content1_bg">
                    <div>
                        <div class="content1_title_img_div"></div>
                        <div class="content1_title_txt_div"></div>
                        <div class="content1_dvider_div"></div>
                        <div class="content1_content_div"></div>
                    </div>
                    <div></div>
                    <div></div>
                </div>

为此我的CSS是

#content1_bg div{width:250px;height:220px;float:left;border:3px solid blue; margin:20px;}

.content1_title_img_div{width:50px;height:100px;}
.content1_title_txt_div{width:150px;height:100px;}
.content1_dvider_div{width:100%;height:10%;clear:both;}
.content1_content_div{width:100%;height:50%;clear:both;}
For this layout i was expecting my design to be like 

----------------
|BOX1     BOX2 |
----------------
|    BOX 3     |
----------------
|    BOX 4     |
----------------

But on using my css layout is somewhat like this

--------------------
|    | |     |     |
|BOX1| | BOX2|     |
|    | |     |     |
--------------------
|    | 
|BOX3|
|    |
--------------------
|    | 
|BOX4|
|    |

基本上我希望我的内部div不要继承外部div的属性。如何删除父div和子div之间的继承关系

1 个答案:

答案 0 :(得分:1)

您必须覆盖子项中的属性。

#content1_bg div

表示位于id#content1_bg元素内的所有div都具有上述属性。

如果只需要将这些属性应用于选定的div组,则可以为所选div分配一个类,并将css定义更改为“#content1_bg div.some_class”。 然后将类some_class分配给选定的div