DIV- 컨테이너의 높이

Question

DIV- 컨테이너에 문제가 있습니다.

inner-teaser

.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> 
 
</div>

는 teaser-image (250 픽셀) + 20 픽셀 패딩으로부터의 높이를 가져야한다. 하지만 inner-teaser의 높이는 40px (2 * 20px 패딩)입니다.

Answer 1

의 부동 아이들의 높이를 취할 강제로 .inner-teaser에 overflow: hidden을 추가

.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; 
 
}

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

Answer 2

은 또한 사용할 수 있습니다 {디스플레이 : 인라인 블록} .inner - 티저 DIV합니다.

.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; 
 
}

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

Answer 3

단지 클래스 클래스 = "티저 텍스트"후 추가를 참조하십시오 데모 : 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 스타일 = "분명히 : 모두">