[英]Height of a DIV-container
I've got a problem with DIV-containers. 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>
The inner-teaser
should have the height from the teaser-image
(250px) + 20px padding. inner-teaser
的高度应为teaser-image
的高度(250px)+ 20px填充。 But inner-teaser
has only a height of 40px (2 * 20px padding). 但是inner-teaser
的高度只有40像素(2 * 20像素填充)。
Add overflow: hidden
to .inner-teaser
to force it to take its floating-children height: 添加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>
You can also use { display: inline-block } for .inner-teaser div. 您也可以对.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>
just add after class class="teaser-text" see demo : demo 只需在类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"> v style =“ clear:both”>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.