Как восстановить отношения родитель-потомок между вложенным div

Question

Я новичок в разработке 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

Answer 1

Вы должны переопределить свойства в дочернем элементе.

#content1_bg div

означает, что все элементы div, входящие в элемент с id # content1_bg, будут иметь указанные свойства.

Если вам нужно применить эти свойства только к выбранному набору элементов div, вы можете назначить класс выбранным элементам div и изменить определение CSS как «# content1_bg div.some_class». Затем назначьте класс some_class выбранным div