2010-06-10 45 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 >想要什么。

相关问题