问题不包含在父div中 [英] Issue with divs not being contained in parent div

问题描述

我的HTML / CSS代码有问题。我有一个父div（secClass），并在其中我有2个子div（secClass1和secClass2）。问题是子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 = sectionclass =secClass> < div class =secClass1> Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。请将您的评论发送给我们，我们会尽快为您解答。 Duis aute irure dolor in renhenderit 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。请将您的评论发送给我们，我们会尽快为您解答。 Duis aute irure dolor in renhenderit 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>

$ b

 < div id =Lnavclass =navClass> 
 
< div class =navClassItems>< hr> 
主页< br>< hr> 
指标< br>< hr> 
联系我们< br>< hr> 
< / div> 
 
< / div> 
 
 div.navClass 
 {
 float：left; 
背景颜色：D4BD6A; 
 width：150px; 
 height：700px; 
} 
 
 div.navClassItems 
 {
 text-align：center; 
 
 
 $ <$ $ p 
 
解决方案
既然你有navClass的float左边，问题是secClass div不能适应，因为它默认是100％宽度。如果你在概念上使它成为100％-150px，你的secClass div会弹出到那个位置。例如： 
 
 
  #Wrapper {
 ... 
 width：1000px; 
 ... 
} 
 .navClassItems {
 ... 
宽度：150px; 
 ... 
} 
 .secClass {
 ... 
宽度：850px; 
 ... 
} 
  
使用 
 
 
 < div id =wrapper> 
< div id =Lnavclass =navClass> 
 
< div class =navClassItems>< hr> 
主页< br>< hr> 
指标< br>< hr> 
联系我们< br>< hr> 
< / div> 
 
< / div> 
< div id =sectionclass =secClass> 
 
< div class =secClass1> 
 Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。请将您的评论发送给我们，我们会尽快为您解答。 Duis aute irure dolor 
 in reninderit 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。请将您的评论发送给我们，我们会尽快为您解答。 Duis aute irure dolor 
 in reninderit 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。现在应该更准确。
 
I have an issue with my HTML/CSS code. I have a parent div (secClass)and within that I have 2 child divs(secClass1 and secClass2). The problem is that the contents of the child divs are not being contained in the parent div. Do you know whats the issue here? I have included the screenshot and code for reference. 





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;
}

解决方案
Since you have your navClass float left, the issue is that the secClass div cannot fit since it is 100% width by default. If you conceptually make it 100% - 150px, your secClass div will pop up into that spot. For example:
#Wrapper{
  ...
  width:1000px;
  ...
}
.navClassItems {
  ...
  width:150px;
  ...
}
.secClass {
  ...
  width:850px;
  ...
}
With
<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>
Do not forget to account for margin or padding. Look into box-sizing and CSS display: inline vs inline-block SO article for more info.

Sorry, I just saw I misnamed the .navClassItems to .navClass. Should be more accurate now.

                        
这篇关于问题不包含在父div中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！