圖像旁邊出現的文字，而不是當文本長於一行

-1

enter image description here

問題的

Codepen例如：http://codepen.io/Mave/pen/PwBNKw

圖像本身不具有任何風格適用於它。

.img{} (obligated to show at least one line of code here, stackoverflow rules)

我想要的是圖像總是在文本旁邊，從不在下面。編輯：忘了提及，它不可能將圖像移動到註釋div，因爲它是一個Java項目，我只做前端..

來源

2015-03-03 vlovystack

你想要什麼？你的問題是什麼 – bbvanee 2015-03-03 09:46:17

@bbvanee我需要圖片總是出現在文本旁邊，而不是在它下面。 – vlovystack 2015-03-03 09:47:49

apply display：inline-block同時顯示內容div和圖像 – 2015-03-03 09:48:26

把圖像放在評論級，並把float:right它：

HTML

<div class="comment"><img class="theimage" width="13" border="0" src="http://i.imgur.com/KbsrwhT.png"> 
    Long comment Long comment Long comment Long comment Long comment Long comment Long comment Long comment Long comment Long comment 
</div>

CSS

.theimage{ 
    float:right; 
}

見codepen：http://codepen.io/anon/pen/YPjqrb

來源

2015-03-03 09:49:06 cederlof

感謝您的回答，看來我確實沒有其他選擇，只能將圖像移動到註釋div中。認爲有沒有將圖像移動到div的方式，但顯然沒有。 – vlovystack 2015-03-03 09:55:06

如果您的HTML如下所示，那麼您不需要做任何事情，圖片將始終出現在內容之後。

.testing-demo { 
 
display:inline; 
 
}

<div class="testing-demo"> 
 
    test test test test test test test test test test test test test test test test test test test test test test test test test 
 
    </div><img class="theimage" width="13" border="0" src="http://i.imgur.com/KbsrwhT.png" />

來源

2015-03-03 09:54:55

您是否相信有一種方法可以在不移動div內的圖像的情況下執行此操作？ – vlovystack 2015-03-03 10:01:40

是的，你可以看到它運行的例子，如果你的內容不是顯示的話，這是一個常見的功能：塊和圖像，然後它總是會在內容之後出現。 – 2015-03-03 10:03:18

我找到了解決方案：評論不需要內聯塊，但只需內聯！ – vlovystack 2015-03-03 10:08:52

圖像旁邊出現的文字，而不是當文本長於一行

回答

相關問題