对齐文本图像（CSS）

问题描述：

如何现在是：http://jsfiddle.net/cSazm/对齐文本图像（CSS）

如何我希望它是：http://jsfiddle.net/mhprg/

与第二变型的问题是我不知道的确切大小图像，所以固定的CSS保证金将不工作:( 也有一个额外的丑陋格..

是否有任何其他的解决方案

答

可以使用"shrinkwrap" method，包含文本，并防止它下面的图像流：

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

（刚加入overflow:hidden到文本格）

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

答

简单，设置了保证金右FOT像这样的形象：

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

的问题是，该文本下面的图像流。 Thelolcat需要两列，左边是图片，右边是文字。 – Sjoerd

好吧，你应该把你的图像换成另一个div，并把文本放到一个段落中，并将它们的显示设置为table-cell，就像下面这个例子：http://jsfiddle.net/cSazm/ – Caelea

答

你需要在文本上放一个宽度（你应该把它放在一个p标签或任何你喜欢的东西）。然后你可以将p浮起来。

这是不理想的，并基于更大的图片，可能无法为你想要建立的，但它是最好的方法。尤其是看到浮动的左边是为了使内容与文本内联等而构建的，所以本质上你正在试图覆盖CSS不太喜欢的规范！

不是最好的解决方案如果你希望你的布局是流畅的，而且你不知道图像的宽度。如果您的图片长度为600像素，该怎么办？ – Caelea

是的，正如我所说的基于更大的图片可能无法正常工作，具体取决于您正在建设的网站。但它通常被认为是最好的解决方案。正如你在其他答案中所说的，表格单元格可以工作，但它不是最佳实践，因为该属性在IE7中不起作用。如果该网站不适用于所有浏览器，那么这很好，但为什么有人会建立一个网站，它适合所有屏幕大小，但不考虑所有浏览器。 – ASouthorn

对于IE7我使用谷歌浏览器框架，它工作很好，并节省我头痛 – Caelea

答

修正像

<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的宽度以上。

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

是的我知道这就是为什么我告诉他要添加图像的宽度，或者可以通过一些JavaScript不知道现在通过脚本将其分配给文本的图像宽度。 – Mudasar

答

您可以浮动图像，然后将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

应该可能使用段落标记而不是div。 – cimmanon

@cimmanon你可能是对的，但由于TS在他的问题中使用了'div'，我会让他改变。 – user2428118

答

如果你有你的图像浮动（在这种情况下留下）overflow:hidden;适用于您的文本div。所以你的CSS应该是：

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

text-div{ 
    overflow: hidden; 
}

无论图像/文字大小如何，你的内容都不会在图像下流动。

要了解更多关于这一点，尼科尔Sullivan在其上写了一个真棒博客，帖子：http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/

对齐文本图像（CSS）

相关推荐