将文本与图片对齐（CSS）

Question

现状如下：http://jsfiddle.net/cSazm/ 我希望它变成：http://jsfiddle.net/mhprg/ 第二种变体的问题在于，我不知道图像的确切大小，所以固定的CSS边距不起作用 :( 另外还有一个额外且丑陋的div。

是否有其他解决方案？

- thelolcat

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;
}    

↪ 点击此处在JSFiddle上查看示例

- user2428118

---

应该使用段落标签而不是 div。 - cimmanon

@cimmanon 你可能是对的，但既然TS在他的问题中使用了“div”，我会让他自己去更改。 - user2428118

Answer 2

你可以使用"收缩包裹"方法，来包含文本并防止它在图片下方流动：

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

我建议在文本div中添加overflow:hidden，这样可以解决多余的div问题。

然而，这并不能解决所有的问题。

- nice ass

Answer 3

如果您的图片浮动（在此情况下是左浮动），请将 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/

- geebru

Answer 4

您需要在文本上添加宽度（可以放在p标签中或您喜欢的任何标签中）。然后，您可以向左浮动p。这并不是最理想的解决方案，并且基于更大的背景可能不适用于您要构建的内容，但这是最好的方法。特别是考虑到向左浮动是为使图像等对象与文本内联而构建的，因此实质上您正在试图覆盖CSS不太支持的标准！

- ASouthorn

---

如果您希望布局具有流动性并且不知道图像的宽度，那么这不是最佳解决方案。如果您的图像长度为600px会怎样呢？ - Caelea

是的，正如我所说，根据整体情况，它可能不适用于您正在构建的网站。尽管如此，它通常被认为是最佳解决方案。正如您在其他答案中所说，table-cell确实有效，但这并不是最佳实践，因为该属性在IE7中无法使用。如果该网站不适用于所有浏览器，则可以接受，但那么为什么有人会构建一个适用于所有屏幕大小的流体网站，却不考虑所有浏览器呢？ - ASouthorn

我使用Google Chrome Frame来解决IE7的问题，它运行良好且避免了让我头疼的情况。 - Caelea

Answer 5

简单，只需为图像设置右边距即可，方法如下：

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

- Caelea

---

问题在于文本流在图像下方。Thelolcat想要两列，左侧是图像，右侧是文本。 - Sjoerd

好的，你应该将图像包装在另一个 div 中，将文本放入段落中，并将它们的显示设置为 table-cell，就像这个例子中一样：http://jsfiddle.net/cSazm/ - Caelea

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一样。

- Mudasar

---

在问题中，他表示不知道图像的确切大小。 - user2428118

是的，我知道，这就是为什么我告诉他要添加图像的宽度或者通过一些JavaScript获取图像的宽度并将其分配给脚本文本。 - Mudasar