Question

第二个变种的问题是我不知道图像的确切大小，因此固定的CSS边距不起作用:( 还有一个额外丑陋的div ..

还有其他解决方案吗？

Answer 1

您可以浮动图像，然后将div设置为表格单元格，这将自动拉伸到可用宽度的100％。

<强> HTML：

<img src="http://lorempixel.com/g/80/80/" alt="" /><div>Text</div>

<强> CSS：

div{
    display:table-cell;
}    

img{
    float:left;
}

↪View this example at JSFiddle

Answer 2

您可以使用"shrinkwrap" method来包含文字并防止其在图片下方流动：

http://jsfiddle.net/cSazm/5/

（只需将overflow:hidden添加到您的文字div）

然而，这并没有解决额外的div问题。

Answer 3

您需要在文本上放置一个宽度（您应该将其放在p标签中或您喜欢的任何内容中）。然后你可以浮动p左。

它并不理想，并且基于可能不适用于您想要构建的更大的图片，但这是最好的方式。特别是看左侧浮动是为了使对象如图像内嵌文本而构建的，所以本质上你试图覆盖css不太友善的规范！

Answer 4

如果您的图片已浮动（在这种情况下为左侧），请将overflow:hidden;应用于文本div。所以你的CSS应该是：

image{
  float: left;
  width: 50px;
  height: 50px;
}

text-div{
  overflow: hidden;
}

无论图像/文字大小如何，您的内容都不会使用此技术在图像下方流动。

要了解更多相关信息，Nicole Sullivan写了一篇很棒的博客文章：http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/

Answer 5

简单，在图像上设置右边缘，如下所示：

img {
    float: left;
    margin-right: 10px;
}

Answer 6

修复图像宽度，如

<img src="http://lorempixel.com/g/80/80/"  width="42" />

现在将您的文本添加到div或p

等标记中

 <div class="text">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
      </div>

在单个div中嵌套标记。现在只需将文本边距指定为图像宽度

.text{
    margin-left: 42px;
}

因为我已经设置了上面的图像42的宽度。

将文本与图像对齐（CSS）

6 个答案: