css и divs - атрибут родителя для детей - PullRequest
Новая
       7

css и divs - атрибут родителя для детей

1 голос
/ 12 сентября 2009

У меня есть контент-div с установленным стилем цвета фона: 

#content { background-color: #FFF; }

У элемента conent есть 3 дочерних элемента: 

#content_right(middle,left) { float: left; width: 500px; }

И HTML-код: 

<div id="content">
  <div id="content_left">...</div>
  <div id="content_middle">...</div>
  <div id="content_right">...</div>
</div>

Я хочу, чтобы цвет фона контента был унаследован дочерними элементами, но это не так.

Кажется, единственный способ установить фоны дочернего элемента div - установить их индивидуально для всех детей.

Вопрос: Как я могу установить bg-color только в родительском элементе содержимого, чтобы стиль распространялся на дочерние элементы?

Ответы [ 5 ]

4 голосов
/ 12 сентября 2009

Цвет фона обычно обрабатывается как transparent, а не inherit, по умолчанию. При inherit фоновое изображение будет скопировано в каждый элемент и смещено с помощью полей / отступов / и т. Д. (Имеет более очевидный эффект с фоновыми изображениями).

Обычно это не имеет значения, поскольку родитель обычно становится достаточно большим, чтобы вместить всех детей (поэтому они будут отображаться на заднем плане родителя). Но, поскольку вы используете float на всех дочерних элементах, фактический размер #content на самом деле не является размером дочерних элементов вместе взятых.

Плавающее содержимое может существовать за пределами родительского элемента.

Без какого-либо собственного статического содержимого #content имеет высоту 0 , в то время как content_left/right/middle фактически существует под ним (поскольку они имеют ... для содержимого, их высота по умолчанию равна line-height).

Чтобы лучше понять, что происходит, попробуйте добавить высоту к #content и цвет фона для детей (или используйте «Проверка элемента» и выделение тегов в Chrome или Firebug): 

#content { background-color: #FFF; height: 5px; }
#content_right(middle/left) { float: left; width: 500px; background: #ccc; }

Но, да, вам нужно указывать цвет фона в плавающих элементах div, а не их родительских элементах.

2 голосов
/ 12 сентября 2009

Не совсем уверен, что именно вы спрашиваете, но обязательно: 

#content div { background-color: #FFF; }

Является ли адекватное решение?

0 голосов
/ 28 октября 2013

Как передать цвет фона css родителя дочерним элементам div.

Установите свойство background-color дочернего элемента для наследования следующим образом: 

<html>
  <style>
    .header{
        background-color:#EEEEEE;
    }
    .leftChild{
        float:left;
        background-color:inherit;  //<--This says child inherit background color.
    }                           

    .rightChild{
        float:right;
    }
  </style>

  <div class="header">
    <div class="leftChild">abc</div>
    <div class="rightChild">def</div>
  </div>
</html>

Только некоторые свойства наследуются от родителя автоматически. Если, например, границы были унаследованы от родителя, результат выглядел бы очень грязно, так как все дочерние элементы имеют границы.

Цвет переднего плана наследуется по умолчанию, а цвет фона - нет. Причина этого очевидна: в большинстве случаев вы бы хотели, чтобы цвет переднего плана наследовался дочерними элементами, но если у родительского элемента было фоновое изображение, вы бы не хотели, чтобы у дочерних элементов было такое же изображение, как их фоновые изображения, вероятно, конфликтуют с фоновым изображением их родителей.

0 голосов
/ 12 сентября 2009

Этот синтаксис недействителен : 

#content_right(middle,left)
{ float: left; width: 500px; }

Правильно будет: 

#content_right, #content_middle, #content_left
{ float: left; width: 500px; }

Полагаю, вы сделали это просто для того, чтобы сократить код вашего поста здесь в stackoverflow, но я советую вам не делать этого. Другие пользователи могут подумать, что синтаксис действителен, и запутаться, заметив, что он не работает.

0 голосов
/ 12 сентября 2009

попробуйте объявить вашего дочернего элемента div в CSS следующим образом: 

#content #content_right(middle,left) { float: left; width: 500px; }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...