divの先頭はドキュメントフローの前のものと同じレベル

Question

divのIDが "main"で、他の2つのdivをラップしています。 "main" divのidが "heading"の別のdivの前に、 "Main"は要素を調べるときに "heading"と同じ行にその先頭を表示します。私は、「主」と「見出し」の間の単純な境界線を作成して、「見出し」の内容に関連して内容を記述したいと考えています。ドキュメントフローで「メイン」と同じレベルにあるのはなぜですか？ありがとう。彼らは崩壊しているので

#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は、同じ行に表示されます。

通常は、表示がblockに設定されている場合、divは内容とともに展開されますが、子がfloatに設定されている場合、要素がフローティングになって通常のフローから削除されます。

floatが必要な場合は、いくつかの回避策を使用することができます。これは既にかなり深くhereと答えています。または、インライン要素には単にdisplay: inline-block;を使用できます。

基本についてはw3schoolsでお読みください。あなたがどのように乗っているのか教えてください。もしこの答えが助けられたら、それが助けになったら正しい答えに印を付けることを忘れないでください。

ありがとうございました