вершина div на том же уровне, что и предыдущий в потоке документа

Question

У меня есть div с идентификатором «main», который обертывает 2 других div. Перед тем, как «главный» div - это еще один div с идентификатором «заголовок». «Main» показывает свою вершину на той же строке, что и «заголовок», когда я проверяю элемент. Я хочу создать несколько простых границ между «основным» и «заголовком», определяющим его содержимое по сравнению с «заголовком». Почему «основной» на том же уровне, что и «заголовок», когда он следует за ним в потоке документа? Благодарю.

#heading { 
    width: 960px; 
    } 
#colD { 
    width: 320px; 
    float: left; 
    } 
#colE { 
    width: 30px; 
    float: left; 
    } 
#colF { 
    width: 250px; 
    float: left; 
    text-align: center; 
    letter-spacing:.1em; 
    font-weight: bold; 
    font-variant: normal; 
    font-size: 1.2em; 
    } 
#colG { 
    width: 10px; 
    float: left; 
    } 
#colH { 
    width: 350px; 
    float: left; 
    } 
.floral-icon { 
    vertical-align: middle; 
    } 
div#colD { 
    text-indent: -999px; 
    } 
div#colF { 
    font-family: "amador";  
    } 
div#colG img { 
    -ms-transform: rotate(180deg); /* IE 9 */ 
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */ 
    transform: rotate(180deg); 
} 
div#heading p { 
    font-size: 72px; 
    text-align: center; 
    margin: 72px 0; 
    letter-spacing: 2px; 
    } 
.img-zoom { 
    width: 310px; 
    -webkit-transition: all .2s ease-in-out; 
    -moz-transition: all .2s ease-in-out; 
    -o-transition: all .2s ease-in-out; 
    -ms-transition: all .2s ease-in-out; 
    } 
.transition { 
    -webkit-transform: scale(2.5); 
    -moz-transform: scale(2.5); 
    -o-transform: scale(2.5); 
    transform: scale(2.5); 
    } 
div.text { 
    width: 620px; 
    float: left; 
    margin-right: 5px; 
    padding: 20px; 
    } 
div.image { 
    width: 300px; 
    height: 1800px; 
    float: right; 
    padding-top: 0px; 
    padding-bottom: 20px; 
    } 
div.image p:first-of-type { 
    font-size: 1.5em; 
    text-align: center; 
    padding-top: 5px; 
    padding-bottom: 5px; 
    border-top: 1px solid #000 !important; 
    border-bottom: 1px solid #000 !important; 
} 


html 

<header> 
    <div id="colA"><a href="index.html" title="link to same page in same directory">Home</a></div> 
    <div id="colB">Barton Lewis's Genealogy Pages</div> 
    <div id="colC"><a href="DNA.html" title="link to same page in same directory">DNA</a></div> 
</header> 
    <div id="heading"> 
    <div id="colD">empty</div> 
    <div id="colE"><p><img class="floral-icon" src="_images/pg_p_lewis_icon.png" alt="floral icon" width="32" height="32"></p></div> 
    <div id="colF"><p>Lewis</p></div> 
    <div id="colG"><p><img class="floral-icon" src="_images/pg_p_lewis_icon.png" alt="floral icon" width="32" height="32"></p></div> 
    <div id="colH"></div> 
    </div> 
<div id="main"> 
    <div class="text"> 
    <p>text</p> 
    <p>text</p> 
    </div> 
<div class="image"> 
    <p>Image Gallery</p> 
    <p>Center image on page and hover to enlarge.</p> 
    <p><img class="img-zoom" src="_images/RL_LEWIS_Alex_KCC_1197_Sur_1.jpg" class="img-thumbnail" alt="lewis land grant" width="259" height="387"></p>  
    <p><img class="img-zoom" src="_images/RL_LEWIS_Alex_KCC_1197_Sur_Assign_to_Benj_P_Campbell.jpg" class="img-thumbnail" alt="lewis land grant" width="259" height="387"></p> 
    </div> 
    </div> 

Answer 1

Ваши родительские контейнеры #main и #heading появляются на той же линии, потому что они разрушаются.

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

Если требуется плавание, вы можете использовать несколько обходных решений, на это уже был дан достаточно подробно ответ here. Или вы можете просто использовать display: inline-block; для встроенных элементов.

Я рекомендую прочитать информацию об основах по адресу w3schools. Сообщите нам, как вы справляетесь, и если этот ответ помог, пожалуйста, не забудьте указать правильный ответ, если это поможет.

Thanks