Цвет фона не наследуя

<!DOCTYPE html> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
<title>Test</title> 
 
<style> 
 
.ribbon-left {left: 10px;top: 20px; width: 400px; height: 300px;position: absolute;} 
 

 
    .css-table {display: table;margin: 0;padding: 0;background-color: red;} 
 
    .css-row { display: table-row; } 
 
    .css-cell {display: table-cell;vertical-align: middle; } 
 

 
    .ribbon-left-middle {width: 80%;bottom: 0;padding-left: 5px;position: relative; } 
 
    .ribbon-left-middle-inner {top: 5px;position: absolute;} 
 

 
</style> 
 
</head> 
 
<body> 
 
<div class="ribbon-left"> 
 
    <div class="css-table"> 
 
     <div class="css-row"> 
 
      <div class="css-cell ribbon-left-middle"> 
 
       <div class="ribbon-left-middle-inner"> 
 
        <div class="productElements">Product elements</div> 
 
        <div class="productDescription">Product description</div> 
 
        <div class="productUsage">Product usage</div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Test</title> 
<style> 
.ribbon-left {left: 10px;top: 20px; width: 400px; height: 300px;position: absolute;} 

    .css-table {display: table;margin: 0;padding: 0;background-color: red;} 
    .css-row { display: table-row; } 
    .css-cell {display: table-cell;vertical-align: middle; } 

    .ribbon-left-middle {width: 80%;bottom: 0;padding-left: 5px;position: relative; } 
    .ribbon-left-middle-inner {top: 5px;position: absolute;} 

</style> 
</head> 
<body> 
<div class="ribbon-left"> 
    <div class="css-table"> 
     <div class="css-row"> 
      <div class="css-cell ribbon-left-middle"> 
       <div class="ribbon-left-middle-inner"> 
        <div class="productElements">Product elements</div> 
        <div class="productDescription">Product description</div> 
        <div class="productUsage">Product usage</div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

Это мой пример. Я определил красный цвет фона для css table parent div. Почему текст не имеет красного фона в дочернем div? Разве не размножается ребенок для детей?

Тот же образец, что у меня есть более одного «css-cell» div, на красном фоне есть. Что я должен здесь изменить?

источник

2016-02-27 Simon

Вы можете установить цвет фона дочерних элементов к «» наследовать – IeuanG

Можете ли вы принять ответ? –

Цвет фона не наследуется. Проверьте документы: https://developer.mozilla.org/en-US/docs/Web/CSS/background-color

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

Однако проблема здесь: .ribbon-left-middle-inner {top: 5px;position: absolute;}

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

Изменить на: .ribbon-left-middle-inner {top: 5px;}

источник

2016-02-27 16:51:37 dan08

Спасибо. При удалении абсолютного значения он работает. Но в том же примере, только у меня есть 3 div внутри «css-row» («css-cell ribbon-left-top», «css-cell ribbon-left-middle», «css-cell ribbon-left -bottom "), цвет фона присутствует во всех div. Как это возможно? – Simon

Спасибо :) Можем ли мы поговорить? –

Цвет фона не наследуя

ответ

Смежные вопросы