2010-03-08 70 views
-1

我是CSS设计的新手,并且不了解CSS的大多数属性。我正在为网页创建布局。我在我的布局中使用div。如何重置嵌套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

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

#content1_bg div 

意味着所有进入id#content1_bg的元素内的div将具有上述属性。

如果您需要将这些属性仅应用于选定的div集合,则可以将类指定给选定的div,并将您的css定义更改为'#content1_bg div.some_class'。 然后指定类some_class到选定的div

+2

@Arun伟大答案thx,这个解决方案在一个镜头中工作。 – 2010-03-08 13:48:00