Пытается отобразить DIV с фиксированной высотой. Почему последующий DIV отображается над DIV с фиксированной высотой?

Это странно; Я указываю height DIV, но браузер, похоже, отображает другие DIV поверх него. Пример: http://jsfiddle.net/x48v4/.Пытается отобразить DIV с фиксированной высотой. Почему последующий DIV отображается над DIV с фиксированной высотой?

Я попробовал объяснение, указав display: block;, но не кубики. Также попытался указать min-height, но это тоже не сработало. Я прочитал многообещающий трюк с участием clear: both;, но это тоже не помогло.

В примере JSFiddle я просто хочу, чтобы красный DIV отображался непосредственно под синим DIV. Цените любую помощь, которую вы можете предоставить!

<html> 
<body style="font-family: arial, helvetica, sans-serif; font-size: 11pt; font-weight: bold; line-height: 1.5;"> 

<div style="width: 300px; text-align: center; margin: 0px auto;"> 

    <div style="height: 300px; background: #9999ff;"> 
     <br> 
     This DIV has a blue background and is 300px tall.&nbsp; I want the red DIV below to display underneath this blue header.<br> 
     &nbsp; 
    <div> 

    <div style="background: #ff5555;"> 
     But instead, this DIV is "superimposed" over the blue DIV's background-&nbsp; why is that?<br> 
     I want this to be underneath the blue DIV instead. 
    <div> 

</div> 

</body> 
</html>

источник

2013-12-22 Larry McPhillips

HTML, в вашем примере является неполным и должен быть размещен здесь, в вашем вопросе. Кроме того, если вы хотите, чтобы красный div появился после синего div, поместите его после синего div в свой HTML, а не как ребенок. – j08691

Спасибо за подсказку; Я также добавил HTML к самому вопросу. Насколько я могу судить, красный div не является дочерним элементом синего div, но я открыт для любой разъясняющей информации об этом ... спасибо! –

Разделитель для обоих ящиков неправильно закрыт.

. Строки 9 и 13. –

Проводка этого также в качестве ответа. Дивы не правильно закрыты - для обоих ящиков.

Вот обновленный код:

<html> 
<body style="font-family: arial, helvetica, sans-serif; font-size: 11pt; font-weight: bold; line-height: 1.5;"> 

<div style="width: 300px; text-align: center; margin: 0px auto;"> 

    <div style="height: 300px; background: #9999ff;"> 
     <br> 
     This DIV has a blue background and is 300px tall.&nbsp; I want the red DIV below to display underneath this blue header.<br> 
     &nbsp; 
    </div> <!-- closed the div here --> 

    <div style="background: #ff5555;"> 
     But instead, this DIV is "superimposed" over the blue DIV's background-&nbsp; why is that?&nbsp; I want this to be underneath the blue DIV instead. 
    </div> <!-- closed the div here --> 

</div> 

</body> 
</html>

источник

2013-12-22 15:20:40

Большое спасибо! Извините, что мой первый вопрос здесь был из-за простой опечатки ... но, возможно, это де-факто. –

Пытается отобразить DIV с фиксированной высотой. Почему последующий DIV отображается над DIV с фиксированной высотой?

ответ

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