我有以下HTML
<div>
<img id="image1"
src="http://valleywag.com/assets/resources/2008/03/BlackGoogleLogo.jpg"
alt="Why doesn't this float correcly?"
style="border-width: 0px; float: left;" />
<div id="divText" style="font-family: Arial, Helvetica, sans-serif; font-size: 11px;"
class="txt-Normal">
<div style="background-color: Green; color: White;">
<p>
<strong><span style="font-size: xx-large;">This is going to be big title</span></strong>
</p>
<ul>
<li>
<span style="font-size: small;">Foo</span>
</li>
<li>
<span style="font-size: small;">Bar</span>
</li>
<li>
<span style="font-size: small;">FooBar</span>
</li>
<li>
<span style="font-size: small;">BarFoo</span>
</li>
</ul>
</div>
</div>
</div>
文本不会浮动图像。浏览器IE或Firefox无关紧要。
如何修复此问题以浮动图像?
在IE6和FireFox2中,文本在我的图像周围漂浮。你有什么CSS可以让我们测试一下吗?
这是我看到的:
Example 1 http://img214.imageshack.us/img214/6906/ff2topie6bottomhz5.gif
您提供的HTML示例是否在HTML文档中?如果是这样,你使用什么doctype?
如果您尝试将所有文本与图像的右侧对齐,则可能还需要将文本的容器向左浮动。这将产生这样的输出:
Both Elements Floated http://img518.imageshack.us/img518/4619/bothfloatedsd7.gif
您可以通过修改代码来完成此操作:
<div id="divText" style="font-family: Arial, Helvetica, sans-serif; font-size: 11px; float:left;" class="txt-Normal">
如果您正在谈论与图像重叠的子弹,您可以增加图像上的margin-right
,或者将列表更改为list-style-position: inside
。
在<ul>
标签中试试这个
style="margin-top: 70px"
我只有IE6,因为我在xp上,我想ie7将优于6(我们至少可以希望)。旧的IE版本笨拙地处理块级元素,新版本更好用。块级元素应该采用它们自己的整行,就像<p>
标记一样。如果你想看看哪个标签是块级别,你可以将这一行放在你的css中以快速达到峰值:
* {
border: 1px solid black;
}
或者下载用于firefox的Web Developer插件,它有一堆漂亮的工具,它有一个内置的“高亮块级元素”功能,它为你的元素添加了不同颜色的边框。
在Firefox2中,文字围绕着我的图像。您可以发布截图,以便更好地理解问题吗?
如果你的意思是子弹重叠图像(我注意到),那么我可以建议的最好是图像边缘右边或禁用子弹样式:
我猜这是因为边距正在崩溃,因为列表标记出现在边距中。
您可以尝试使用<ul style="margin-left: 291px;">
。