DIV容器的高度

Question

DIV容器有問題。

 .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-qc-640-480-5.jpg);">Image</div> <div class="teaser-text">Lorem ipsum dolor...</div> </div> </div> 

inner-teaser的高度應為teaser-image的高度（250px）+ 20px填充。 但是inner-teaser的高度只有40像素（2 * 20像素填充）。

Answer 1

添加overflow: hidden在.inner-teaser以強制其采用浮動兒童的高度：

 .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-qc-640-480-5.jpg);">Image</div> <div class="teaser-text">Lorem ipsum dolor...</div> </div> </div> 

Answer 2

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

 .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-qc-640-480-5.jpg);">Image</div> <div class="teaser-text">Lorem ipsum dolor...</div> </div> </div> 

Answer 3

只需在類class =“ teaser-text”之后添加，請參見demo： 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-qc-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”>