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正在添加一些浮点数，这会从页面流中删除元素，因此容器的行为就像那些元素不在其中一样。尝试在各个地方添加一个已清除的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>

设置div的高度

1 个答案: