圍繞着浮動環繞文字

你好我正在創建一個頁面，我似乎無法得到一些工作。我在段落末尾有一張圖片，而在CSS中，這是浮動的。我無法將圖像移動到段落的一部分，然後使文本環繞它。 JSFIDDLE 圍繞着浮動環繞文字

HTML

<p> 
    TEXT GOES HERE 
    <img src="src/src.jpg"> 
</p>

CSS

img{ 
    float:right; 
}

確保檢查出的jsfiddle因爲它有我想要什麼更好的代表性。

來源

2015-04-17 Jace Bayless

爲了清楚起見，您希望圖像位於頁面的右下角，文字環繞它而不是出現在最後一行文字下方的圖像。 –

@Marc正確，右下角圖像底部，文字底部。如果繼續混淆，我可能會顯示一張圖片 –

這不是一件容易的事情，JS必須參與 - https://github.com/gilly3/lowFloat – Stickers

您需要將浮動權限文本上方的圖像移動到該工作方式。

<p> 
    <img src="src/src.jpg"> 

    TEXT GOES HERE 
</p>

來源

2015-04-17 13:24:05 Aaron

但是文字非常長，我希望它處於最底層。這是否仍然有效？你可以在http：// repmofbla看到我的意思。COM/SimmonsRedone/biographyHTML.html。 –

HTML從上到下按照基本的堆疊順序工作，所以在文本下方的圖像中添加一個「float：right;」它會使其向右浮動，但圖像下方沒有任何東西向上移動進入那個空的空間。 – Aaron

但是，您可以將圖像放在文本末尾前幾個段落 – Aaron

必須要麼在圖像移動到前面或外移動它：

<p> 
    <img src="src/src.jpg"> 
    TEXT GOES HERE 
</p>

或

<img src="src/src.jpg"> 
<p> 

    TEXT GOES HERE 
</p>

來源

2015-04-17 13:25:58 mohamedrias

-1

將一個<div>您的段落內，並保持你的文字裏面。然後作出float: left和圖像float: right

類似下面：

HTML代碼樣品JSFiddle

<p> 
    <div> THIS IS A LOT OF TEXT 
      ........................ 
      ......................... 
    </div> 
    <!-- MOVE THIS IMAGE UP SO IT'S NOT BELOW AND WRAP TEXT AROUND IT --> 
    <img src="..Troll-face.png" /> 
</p>

CSS

img{ 
    float:right; 
    width:150px; 
} 

p { 
    width:100%; 
    height: auto; 
} 

div{ 
    width:70%; 
    height:auto; 
    float: left; 
}

來源

2015-04-17 13:48:07

div裏面的段落不是語義的，很不好回答:( – Aaron

語義拋開，圖片還是不在OP所在的地方想要它和文本不包裹它... –

亞倫是正確的，圖像將不得不超出文字。如果是長的，你總是可以做一個

<p> 
    TEXT GOES HERE<br> 
    <img src="src/src.jpg"> 
    TEXT GOES HERE 
</p>

不知道這是猶太與編碼，但它的工作原理。

來源

2015-04-17 20:55:02

圍繞着浮動環繞文字

回答

相關問題