Question

我有一个id为“main”的div，它包含了2个其他div。在“main”div之前是另一个id为“heading”的div。当我检查元素时，“Main”在与“heading”相同的行上显示它的顶部。我想在“主要”和“标题”之间创建一些简单的边框，描述其与＃34;标题相关的内容。＆＃34;为什么“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出现在同一行，因为它们正在折叠。

正常情况下，当div的显示设置为block时，div会随其内容扩展，但是当它的子项设置为float时，它会因为浮动元素而崩溃，导致它从正常流中移除

如果需要float，你可以使用几种解决方法，这已经得到了很深入的回答here。或者，您只需将display: inline-block;用于内联元素。

我建议您阅读w3schools的基础知识。让我们知道你是如何得到的，如果这个答案有所帮助，请不要忘记如果它有帮助就标记一个正确的答案。

由于

div的顶部与文档流程

1 个答案: