html - CSS:如何在不使用 float 的情况下将一张图像和一个带有两个 的 block 放在一行中

Question

我想在一行中放置一张图片和一个包含两个

的 block ，但如果在图像上使用 float ，它将超出那个大块的边界。我不想给大块增加高度，因为有时图像不会退出。喜欢这个链接:图像和(p1 + p2)在一行中。 http://verygif.com/bbs/b/src/138002270032.jpg抱歉无法发布图片。

big_block {
border:2px solid #333;
}


<div class="big_block">
{if img exit }<img .... />{/if}
<p>sometext,sometext,sometext,sometext</p>
<p>fulltext,fulltext,fulltext,fulltext</p>
</div>

Answer 1

只需声明overflow: hidden;在 parent 身上<div>容器。这将清除 float 并通过确保父级环绕段落和图像来确保图像不会超出父级的边界。

请参阅此处示例:http://jsfiddle.net/teddyrised/8aeAL/