html - 如何让我的容器根据他里面的容器增长？

Question

我的问题是这样的。我有容器，在他里面我还有 2 个容器，一个是我用来放置图像的容器，另一个是我用来放置标题和段落的容器。我想做一些类似于新闻的简短预览，我将拥有这个容器的多个副本，这些副本具有不同的图像和不同的标题和段落，我不想总是调整父容器的高度我想自动调整他的高度.我可以使用 CSS 实现吗？如何实现？

这是示例代码

<!-- First div is Bootstrap jumbotron -->
<div class="jumbotron">
   <div class="boxForNews">
      <div class="boxForImage">
         <img src=" ">
      </div>
      <div class="boxForContent">
         <h3>Some Heading</h3>
         <p>Random text Random text Random text Random text</p>
      </div>
   </div>
</div>

这是CSS

.boxForImage{
    width:33%;
    float:left;
}
.boxForContent{
    width:66%;
    float:left;
}

boxForNews 内的容器根据我放入其中的元素而增长，但它们的父容器不会根据 2 个容器的增长而增长，因此我的超大屏幕被打破了。

我可以给第一个容器一些高度，但我放在他里面的 2 个容器中的内容总是会改变，我将不得不总是播放并改变我添加的每个新闻的高度。

Answer 1

首先是代码中的错误；您缺少类属性 boxForImage 的结束引号，并且样式规则 .boxForImage 以 { 而不是 } 结尾.

boxForNews div 中的 float 元素不会影响其父元素的高度。您可以通过更改 overflow 样式使其包含其子项:

.boxForImage{
    width:33%;
    float:left;
}
.boxForContent{
    width:66%;
    float:left;
}

.boxForNews {
  overflow: hidden;
  background: #eee;
}

<!-- First div is Bootstrap jumbotron -->
<div class="jumbotron">
   <div class="boxForNews">
      <div class="boxForImage">
         <img src="http://placehold.it/100x100">
      </div>
      <div class="boxForContent">
         <h3>Some Heading</h3>
         <p>Random text Random text Random text Random text</p>
      </div>
   </div>
</div>