左對齊文本和右對齊圖像在CSS

我對CSS有點新，我有一個問題，我似乎無法解決。我想在我的頁面上有一系列div（堆疊在另一個的頂部），並且每個div都應包含一些文本和一個或多個圖像。左對齊文本和右對齊圖像在CSS

特別是，我希望文本左對齊，並在中間垂直對齊，圖像應該右對齊，並且div的高度應基於圖像的高度（可以可變）。

基本上每一個的div應該像這樣： enter image description here

到目前爲止，我已經能夠得到上面列出的一項或多項要求，但從來沒有所有的人在同一時間。這實際上是純粹的CSS可能，或者我應該不浪費我的時間，並使用表？

來源

2013-10-18 A.R.

請發佈您的HTML和文本。用4K +代表你現在應該知道我們需要什麼。 – j08691

我沒有任何HTML本身。這實際上是一塊文字和兩幅圖像。我嘗試過一連串的組合都無濟於事，所以我不知道如何發佈其中一個組合會有所幫助。 –

是否這樣？ http://jsfiddle.net/Y6ak3/ –

嗨，我有一個爲你解決赤此鏈接http://jsfiddle.net/8mQc4/15/。

它是基於使用的一些屬性，如：

float and vertical-align.

此代碼允許靈活的高度和IMG的寬度，也是他集裝箱中心垂直去text.Just更多的大文本或圖像嘗試。

來源

2013-10-18 21:48:02 DaniP

很高興知道爲什麼這會降低投票率。這是唯一真正有效的工具。 –

我真的不知道爲什麼有人低估了這可能是因爲有些人不讚賞使用float：P – DaniP

誰知道。也許是因爲裏面提到了表格，儘管

可能是唯一正確的工作。 –

哦，男人我得到了一個有趣的解決方案，可以工作，但沒有一個是一個堅實的想法！

如果將圖像設置爲背景，則可以避免浮動或定位。

.section { 
    background: url(http://jpowell43.mydevryportfolio.com/flatDesign/images/tab-2.svg) no-repeat rgba(255, 255, 0, 0.4); 
    background-position: center right; 
    background-size: contain; 
    width: 100%; 
}

我唯一可能發現的問題是圖像大小是基於div內的內容。

JSFIDDLE

這將使圖像有一個固定的大小，但！它確實會遇到在圖像上依賴文本大小的問題。：/

background-size: 80px 60px;

Fixed size

隨着使用min-height: whatever;你仍然可以達到理想的結果，但不是100％是最好的。

min-height

來源

2013-10-18 21:25:59

如果您希望'img'具有固定尺寸，該怎麼辦？ –

是的，我剛剛遇到這個問題，讓我看看是否有辦法實現這一點，否則我可以刪除答案。 –

我不會說刪除答案，它仍然是有用的。 –

相關問題

左對齊文本和右對齊圖像在CSS

回答

相關問題