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个容器的增长而相应增长，因此我的jumbotron被打破了。

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

Answer 1

首先是代码中的错误;您缺少类属性boxForImage的结束标记，样式规则.boxForImage以{而不是}结尾。

boxForNews div中的浮动元素不会影响其父级的高度。您可以通过更改overflow样式：

使其包含子代

＆＃13;

.boxForImage{
    width:33%;
    float:left;
}
.boxForContent{
    width:66%;
    float:left;
}

.boxForNews {
  overflow: hidden;
  background: #eee;
}

＆＃13;

<!-- 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>

＆＃13;

如何使我的容器相应地增加其内部的容器？

1 个答案: