Question

我遇到了DIV容器的问题。

＆＃13;

.inner-teaser {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}
.bg-blue {
    background: blue;
}
.teaser-image {
    background-position: center;
    background-size: 350px;
    width: 250px;
    height: 250px;
    border-radius: 150px;
}
.image-left {
    float: left;
    margin-right: 50px;
}

＆＃13;

<div class="outer-teaser bg-blue">
    <div class="inner-teaser">
        <div class="teaser-image image-left" style="background-image: url(http://lorempixel.com/output/abstract-q-c-640-480-5.jpg);">Image</div>
        <div class="teaser-text">Lorem ipsum dolor...</div>
    </div>
</div>

＆＃13;

inner-teaser应该具有teaser-image（250px）+ 20px填充的高度。但是inner-teaser只有40px的高度（2 * 20px填充）。

Answer 1

将overflow: hidden添加到.inner-teaser以强制其获取浮动儿童身高：

＆＃13;

.inner-teaser {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
    overflow: hidden;
}
.bg-blue {
    background: blue;
}
.teaser-image {
    background-position: center;
    background-size: 350px;
    width: 250px;
    height: 250px;
    border-radius: 150px;
}
.image-left {
    float: left;
    margin-right: 50px;
}

＆＃13;

<div class="outer-teaser bg-blue">
    <div class="inner-teaser">
        <div class="teaser-image image-left" style="background-image: url(http://lorempixel.com/output/abstract-q-c-640-480-5.jpg);">Image</div>
        <div class="teaser-text">Lorem ipsum dolor...</div>
    </div>
</div>

＆＃13;

Answer 2

您也可以使用{display：inline-block}作为.inner-teaser div。

＆＃13;

.inner-teaser {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
    display: inline-block;
}
.bg-blue {
    background: blue;
}
.teaser-image {
    background-position: center;
    background-size: 350px;
    width: 250px;
    height: 250px;
    border-radius: 150px;
}
.image-left {
    float: left;
    margin-right: 50px;
}

＆＃13;

<div class="outer-teaser bg-blue">
    <div class="inner-teaser">
        <div class="teaser-image image-left" style="background-image: url(http://lorempixel.com/output/abstract-q-c-640-480-5.jpg);">Image</div>
        <div class="teaser-text">Lorem ipsum dolor...</div>
    </div>
</div>

＆＃13;

Answer 3

只需在课后添加class =“teaser-text”，请参阅演示：demo

.inner-teaser {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}
.bg-blue {
    background: blue;
}
.teaser-image {
    background-position: center;
    background-size: 350px;
    width: 250px;
    height: 250px;
    border-radius: 150px;
}
.image-left {
    float: left;
    margin-right: 50px;
}

<div class="outer-teaser bg-blue">
    <div class="inner-teaser">
        <div class="teaser-image image-left" style="background-image: url(http://lorempixel.com/output/abstract-q-c-640-480-5.jpg);">Image</div>
        <div class="teaser-text">Lorem ipsum dolor...</div>
  <div style="clear:both"></div>
    </div>
</div>

v style =“clear：both”＆gt;

DIV容器的高度

3 个答案: