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: inline到<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/

CSS：如何在不使用float </p>的情况下将一个图像和一个块与两个<p>放在一行中

3 个答案: