對齊文本圖像（CSS）

如何現在是：http://jsfiddle.net/cSazm/對齊文本圖像（CSS）

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

與第二變型的問題是我不知道的確切大小圖像，所以固定的CSS保證金將不工作:( 也有一個額外的醜陋格..

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

來源

2012-09-24 thelolcat

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

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

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

這並不然而解決額外的div問題。

來源

2012-09-24 13:48:38

簡單，設置了保證金右FOT像這樣的形象：

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

來源

2012-09-24 13:21:05 Caelea

的問題是，該文本下面的圖像流。 Thelolcat需要兩列，左邊是圖片，右邊是文字。 – Sjoerd

好吧，你應該把你的圖像換成另一個div，並把文本放到一個段落中，並將它們的顯示設置爲table-cell，就像下面這個例子：http://jsfiddle.net/cSazm/ – Caelea

你需要在文本上放一個寬度（你應該把它放在一個p標籤或任何你喜歡的東西）。然後你可以將p浮起來。

這是不理想的，並基於更大的圖片，可能無法爲你想要建立的，但它是最好的方法。尤其是看到浮動的左邊是爲了使內容與文本內聯等而構建的，所以本質上你正在試圖覆蓋CSS不太喜歡的規範！

來源

2012-09-24 13:27:29 ASouthorn

不是最好的解決方案如果你希望你的佈局是流暢的，而且你不知道圖像的寬度。如果您的圖片長度爲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的寬度以上。

來源

2012-09-24 13:35:06 Mudasar

在問題中，他表示他不知道圖像的確切大小。 – 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

來源

2012-09-24 13:46:32 user2428118

應該可能使用段落標記而不是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/

來源

2012-09-24 18:01:54 geebru

對齊文本圖像（CSS）

回答

相關問題