div中未包含父div的問題

-1

我的HTML/CSS代碼存在問題。我有一個父div（secClass），並在其中我有2個子div（secClass1和secClass2）。問題是子div的內容沒有包含在父div中。你知道這有什麼問題嗎？我已經包含了截圖和代碼以供參考。div中未包含父div的問題

div.secClass { 
 
    background-color: 806815; 
 
    height: 1000px; 
 
} 
 
div.secClass1 { 
 
    background-color: D4BD6A; 
 
    display: inline-block; 
 
} 
 
div.secClass2 { 
 
    background-color: D4BD6A; 
 
    display: inline-block; 
 
}

<div id="section" class="secClass"> 
 

 
    <div class="secClass1"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </div> 
 

 
    <div class="secClass2"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </div> 
 

 
</div>

<div id="Lnav" class="navClass"> 

<div class="navClassItems"><hr> 
Main Page<br><hr> 
Metrics <br><hr> 
Contact us<br><hr> 
</div> 

</div> 

div.navClass 
{ 
float:left; 
background-color:D4BD6A; 
width:150px; 
height:700px; 
} 

div.navClassItems 
{ 
text-align:center; 
}

來源

2016-03-16 Nidhin_toms

如果你想把一些大小限制給父div，那麼應用'height：100px'而不是1000px。那是你在做什麼？ – divix

問題在於左側的菜單。發佈代碼。默認情況下，DIV是塊級元素，所以除非您修改了包含菜單的DIV，否則它的右邊沒有任何內容。 10美元說，如果你製作菜單容器和secClass內嵌塊的寬度已定義，它將以你想要的方式工作:) –

你的代碼是不完整的。我們需要看到更多的代碼！ –

既然你已經離開了您的navClass浮動的問題是，secClass DIV不適合，因爲它是在默認情況下100％的寬度。如果你在概念上使它成爲100％-150px，你的secClass div會彈出到那個位置。例如：

#Wrapper{ 
    ... 
    width:1000px; 
    ... 
} 
.navClassItems { 
    ... 
    width:150px; 
    ... 
} 
.secClass { 
    ... 
    width:850px; 
    ... 
}

隨着

<div id="wrapper"> 
<div id="Lnav" class="navClass"> 

<div class="navClassItems"><hr> 
Main Page<br><hr> 
Metrics <br><hr> 
Contact us<br><hr> 
</div> 

</div> 
<div id="section" class="secClass"> 

<div class="secClass1"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
</div> 

<div class="secClass2"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
</div> 

</div>

不要忘了考慮保證金或填充。看看箱子大小和CSS display: inline vs inline-block SO文章的更多信息。

對不起，我剛纔看到我錯誤地將.navClassItems命名爲.navClass。現在應該更加準確。

來源

2016-03-16 22:50:18

div中未包含父div的問題

回答

相關問題