div與文檔流程中之前的文件位於同一級別

我有一個包含2個其他div的「main」標識的div。在「main」div之前是另一個id爲「heading」的div。「Main」在檢查元素時顯示在與「heading」相同的行上。我想在「主標題」和「標題」之間創建一些簡單的邊界，以描述與「標題」相關的內容。爲什麼當它跟在文檔流中時，「主」與「標題」處於同一水平？謝謝。div與文檔流程中之前的文件位於同一級別

#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>

來源

2016-11-27 Barton Lewis

你父容器#main和#heading出現在同一行，因爲他們正在崩潰。

通常一個div將與它的擴展內容時，它的顯示設置爲block然而，當它的兒童被設置爲float它縮短爲浮動的元件導致其從正常流動被去除。

如果需要浮點數，則可以使用多種解決方法，這已經得到了相當深入的解答here。或者您可以簡單地使用display: inline-block;作爲內聯元素。

我推薦閱讀w3schools的基礎知識。讓我們知道你的方式，如果這個答案有幫助，請不要忘記標記正確的答案，如果它有幫助。

謝謝

來源

2016-11-27 01:16:23

我浮動父div和一切工作。該鏈接最有幫助。不知道我是不是應該只說「謝謝」或感謝，但我感謝你的幫助。 –

div與文檔流程中之前的文件位於同一級別

回答

相關問題