html - CSS：如何将一个图像和一个块与两个在一行中不使用浮点数

Question

我想把一个图像和一个块两个

在一行中，但如果在图像上使用浮动，它将超出那个大块的边界。我不想为大块添加高度，因为有时图像不会退出。像这个链接：图像和 (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;在父<div>容器上声明即可。这将清除浮动并通过确保父母环绕段落和图像来确保图像不会超出父母的边界。

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

Answer 2

您可以尝试使用display: inlineto<p>标签，

p { 
  margin: 0; 
  padding: 0; 
  display: inline; 
} 

检查这个http://jsfiddle.net/tpD2u

Answer 3

我总是使用这样的东西：

.big_block img { float: left; }
.big_block:after { display: block; cler: both; content: " "; }

http://jsfiddle.net/QWm4T/