css - 将文本与图像对齐 (CSS)

Question

现在怎么样了：http: //jsfiddle.net/cSazm/

我希望它是怎样的：http: //jsfiddle.net/mhprg/

第二个变体的问题是我不知道图像的确切大小，所以固定的 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;
}    

↪在 JSFiddle 查看这个例子

Answer 2

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

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

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

然而，这并不能解决额外的 div 问题。

Answer 3

您需要在文本上添加宽度（您应该将其放入 ap 标签或您喜欢的任何内容中）。然后你可以将 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 的宽度。