Цвет фона CSS не отображается?

Я сделал два класса, в которых один главный, а другой - дочерний div. В главном div я даю ширину 100% цвет фона: красный, а в дочернем div я даю ширину 100%, а синий - и верхний 100px. Но в браузере красный цвет не появляется. Если я использую float в главном div, тогда цвет появляется в браузере, но основной класс уже имеет ширину 100%, поэтому мы не должны давать ему float-элемент.Цвет фона CSS не отображается?

<style> 

.main {width:100%; background-color:#FF0000} 

.child { width:100%; margin-top:100px; background:#0000FF} 

</style> 

</head> 

<body> 

<div class="main"> 
    <div class="child">asfda</div> 
</div>

источник

2012-03-17 Jitender Chand

увидеть скрипку:

Fiddle: http://jsfiddle.net/uT7Vv/

Демо: http://jsfiddle.net/uT7Vv/embedded/result/

источник

2012-03-17 16:26:02 w3uiguru

Ваши поля являются collapsing. Вы можете исправить это с помощью padding на родительский элементе вместо:

.main { 
    background-color: red; 
    padding-top: 100px; 
    width: 100%; 
} 

.child { 
    background-color: blue; 
    width: 100%; 
}

Here's a demo.

источник

2012-03-17 16:27:14 Ryan

, но почему эта проблема возникла –

@JitenderChand: См. Ссылку. http://www.w3.org/TR/CSS2/box.html#collapsing-margins При определенных обстоятельствах смежные поля сворачиваются. – Ryan

вашего ребенок сНу перекрытие на главной Div

потребности дать высоту в главном сНе .Try этого

<style> 

.main {width:100%; background-color:#FF0000;height:50px;} 

.child { width:100%; margin-top:100px; background:#0000FF} 

</style> 

</head> 

<body> 

<div class="main"> 

<div class="child">asfda</div> 
</div>

источник

2016-01-08 08:47:13

Цвет фона CSS не отображается?

ответ

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