3的div沒有對齊

我做一個論壇，我有一個問題：3的div沒有對齊

上述工作的很好，但是當我減少了頁面的大小，現在的問題是：

如果我設置爲文本：

width:auto;

與父：

white-space:nowrap;

它的工作原理，但word-wrap: break-word;不工作:(

我想要的圖片是左與沒有它下面的文字。

https://jsfiddle.net/39w1tkp2/1/

來源

2015-08-26 Derpolino

「這是工作，但在自動換行：打破字;不工作:(「image：[Clic here]（http://i.imgur.com/mTZt8iL.png） – Derpolino

刪除'white-space：nowrap;'。 –

salut，你可以共享一個jsfiddle或者ur代碼pls –

要創建左側是其中的列頭像會說謊，它下面根本就沒有文字...

.posttext{ 
    word-wrap: break-word; 
    display:block; // change to block 
    padding-right:5px; 
    width:auto; 
    padding-left: 120px; // pad left 
}

Demo

來源

2015-08-26 12:54:42 Popnoodles

謝謝你的工作！ – Derpolino

你能否解釋一下將塊元素更改爲塊元素的功能？並定義一個塊元素的自動寬度？使用填充這是一個解決方案，但不是很方便，如果你改變的東西..但（Y） –

@Derpolino

從類posttext和userpost

來源

2015-08-26 12:30:20

什麼使userpost類與答案？ –

現在我有一個問題：[這裏]（http://i.imgur.com/kSex6Vo.png）該文本不應該在紅色的矩形：/ – Derpolino

@Derpolino它會更好，如果你描述了準確的預期結果在第一位，那麼貢獻者可以給出正確的答案。 – Popnoodles

.posttext { 

    display: inline; /*instead of inline-block*/ 

}

刪除display: inline-block由於div.posttext的寬度有沒有足夠的空間來放置的元素。如果將其更改爲顯示：inline; （標準是塊），它將有足夠的空間將它放在它們之間。發現在this link太理解的差塊和內聯之間..

編輯：用戶要求更多的溶液＃1 img的父DIV：得到400像素一個最小高度;文字將在400px後流回左側;

編輯：用戶要求更多解決方案＃2（沒有完全測試過，缺乏可用的時間ATM對不起））

.posttext { 

    display: table; 

}

來源

2015-08-26 12:30:51

現在我有一個問題：這裏的文字不應該在紅色的矩形：/ – Derpolino

@Derpolino我會發布serveral解決方案:) –

這仍然留下文字流入左列，這聽起來應該是空的。在文本上填充可能是你的朋友。 – Popnoodles

3的div沒有對齊

回答

相關問題