Question

我有这样的结构：

HTML

<div class="cat_item">
    <div class="cat_image">
         <img src="/res/imyg/srm450v2.jpg" />
    </div>
    <div class="cat_desc">
        <h2>Mackie - SRM450v2</h2>
        <p>
             Description Text
        </p>
     </div>
</div>

LESS

.cat_item {
  padding:10px;
  border-radius:5px;
  background-color:white;

  box-shadow:2px 2px 5px black;

  color:black;

  .cat_image {
    float:left;

    margin-right:25px;
    padding:5px;

    background-color:red;

    img {
      width:125px;
      height:175px;
    }
  }

  .cat_desc {
    padding:5px;
  }
}

现在我希望cat_item div改变高度，因此它适合图像。但是只有文本会影响cat_item div的高度。我做错了什么？

Answer 1

这是漂浮物。尝试使用clearfix CSS或将overflow：hidden设置为外部div。

如何在没有额外标记的情况下清除CSS浮点数 - 不同的技术解释。有三种主要方法：a）浮动包含元素，b）在容器上使用overflow: hidden，c）使用:after CSS生成内容伪类。

来自：http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

Answer 2

在上一次结束</div>之前，您需要以下内容。

<div class="clearfix"></div>

在你的CSS中：

.clearfix{
    clear: both;
}

外部div高度不随img内部扩展

2 个答案: