将文本与图像对齐（CSS）

现在情况如何：

我希望它是怎样的：

第二种变体的问题是，我不知道图像的确切大小，因此固定CSS边距不起作用：( 还有一个特别难看的div

---

还有其他解决方案吗？

简单地说，为图像设置右边距，如下所示：

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

---

你需要在文本上加上一个宽度（你应该把它放在一个p标签或者你喜欢的任何东西中），然后你可以把p向左浮动

---

这并不理想，而且基于大局，这可能不适用于您想要构建的内容，但这是最好的方法。特别是考虑到左浮动是为了使对象（如图像）与文本内联而构建的，因此本质上，您试图覆盖css不太喜欢的规范！

像这样固定图像宽度

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

---

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

您可以浮动图像，然后将

div

设置为表格单元格，它将自动拉伸到可用宽度的100%

HTML:

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

div{
    display:table-cell;
}    

img{
    float:left;
}    

↪

您可以使用，来包含文本并防止其在图像下方流动：

（只需将

溢出：隐藏
添加到文本div）

但是，这并不能解决额外的div问题。
如果您的图像处于浮动状态（在本例中为左侧），请将
溢出：隐藏；
应用于文本div。因此，您的CSS应该：

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

text-div{
  overflow: hidden;
}

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

为了进一步了解这一点，Nicole Sullivan在其上写了一篇很棒的博文：
问题在于文本在图像下方流动。Olcat需要两列，左边一列带有图像，右边一列带有文本。好的，您应该将图像和文本包装到另一个div中，并将它们的显示设置为table cell，如本例中所示：如果您希望布局流畅且不知道图像的宽度，则这不是最佳解决方案。如果图像的长度为600px，该怎么办？是的，正如我所说，根据大图，它可能无法工作，具体取决于您正在构建的站点。但这通常被视为最佳解决方案。正如您在另一个答案中所说，选项卡LE细胞可以工作，但这不是最好的做法，因为IE7中的属性不起作用。如果这个站点不是所有浏览器都适用的，那么那就好了，但是为什么会有人建立一个适合所有屏幕大小的网站，但却不考虑所有浏览器。对于IE7我使用谷歌浏览器框架，它工作得很好，并节省了我的头疼。当然，他说他不知道图像的确切大小。是的，我知道这就是为什么我告诉他添加图像的宽度，或者可能通过一些javascript获得图像的宽度，现在不知道，然后通过脚本将其分配给文本。应该使用段落标记而不是div。@cimmanon你可能是对的，但是由于TS使用了
div
s在他的问题中，我会让他改变。
div{
    display:table-cell;
}    

img{
    float:left;
}    

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

text-div{
  overflow: hidden;
}