html - 设置div的高度

Question

我想根据子元素设置部分的高度，但不幸的是我不知道我的代码有什么问题。当我尝试减小屏幕大小时，段落中的内容和 img 溢出。

HTML

<div id="section2" class="about">
      <div class="container-section">
         <div class="about-content col-lg-6">
            <p></p>
         </div>
         <div class="about-pic col-lg-2">
            <img />
         </div>
      </div>
 </div>

CSS

.about{
height: auto;
margin: 0;
}
.about .container-section{
padding: 0;
height: auto;
position: relative;
}
.about .container-section .about-content p{
padding-bottom: 15px;
font-family: 'Lato', sans-serif;
text-align: justify;
}
.about .container-section .about-pic img{
height: auto;
width: 100%;
padding-bottom: 25%;
} 

有什么建议吗？

Answer 1

好的，看起来您正在使用 Bootstrap，对吧？ Bootstrap 正在添加一些 float 元素，这会从页面流中移除元素，因此容器的行为就好像这些元素不在其中一样。尝试在不同的地方添加一个清除的 div，看看它是否能解决您的问题，如下所示:

<div id="section2" class="about">
  <div class="container-section">
     <div class="about-content col-lg-6">
        <p></p>
     </div>
     <div class="about-pic col-lg-2">
        <img />
     </div>
  </div>
  <div style="clear:both;"></div>
</div>