2010-06-10 69 views
1

如果在this W3schools example中將「float:right」更改爲「float:left」,則會在該段落的左側顯示圖像。我可以浮動像圖像一樣的文本塊嗎?

我想用一塊文字做同樣的事情。目的是能夠在段落的左側留下小注釋。如果你知道有什麼辦法可以做到這一點,我會非常感激。如果有一種方法可以在段落的中間放置這個註釋,並讓文本流動起來,我會非常感激(並且很驚訝)。

我搜遍了所有的答案,但可能不知道如何問這個問題,以便搜索引擎可以幫助我。所以現在我吸引人類!

回答

0

這是W3schools網站適用於浮動文本的示例。變化是上線4和20

<html> 
<head> 
<style type="text/css"> 
div 
{ 
float:right; 
border:1px dotted black; 
margin:0px 0px 15px 20px; 
} 
</style> 
</head> 

<body> 
<p> 
In the paragraph below, the image will float to the right. A dotted black border is added to the image. 
We have also added margins to the image to push the text away from the image: 
0 px margin on the top and right side, 15 px margin on the bottom, and 20 px margin on the left side of the image. 
</p> 
<p> 
<div>This is floated text. This is floated text. This is floated text.</div> 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
</p> 
</body> 

</html> 

您也可以使用<div style="float:right">text</div>,如果你不想每天浮動元素div

編輯:要在頁面中途獲得浮動文本,只需在<p>塊的中間粘貼<div style="float:right">This is an annotation</div>即可。

0

可以做到:

#CONTENT .calloutBox{ 
    background-color: #1c5a80; 
    color:    Black; 
    float:    right; 
    margin-left:  10px; 
    width:    175px; 
} 

而只是包裝你< DIV CLASS = 「calloutBox」 > ... </DIV >想要什麼。

相關問題