Html Internet explorer和浮动：请解释
昨天有人问。我展示了：一个基于表格的和一个纯CSS。现在，纯CSS在Firefox和Chrome中运行良好，但在IE中不起作用 基本上，这些浮子会被抛到下一行。根据我的理解（以及FF和Chrome的行为），情况不应该如此，因为左div是块级元素，浮动应该基本忽略 下面是完整的代码示例。添加DOCTYPE以强制IE进入标准兼容模式略有帮助，但问题仍然存在 所以我的问题是：我对浮动的理解是错误的还是IE的问题 更重要的是，我如何在IE中实现这一点？它一直在折磨着我Html Internet explorer和浮动：请解释,html,css,internet-explorer,cross-browser,Html,Css,Internet Explorer,Cross Browser,昨天有人问。我展示了：一个基于表格的和一个纯CSS。现在，纯CSS在Firefox和Chrome中运行良好，但在IE中不起作用 基本上，这些浮子会被抛到下一行。根据我的理解（以及FF和Chrome的行为），情况不应该如此，因为左div是块级元素，浮动应该基本忽略 下面是完整的代码示例。添加DOCTYPE以强制IE进入标准兼容模式略有帮助，但问题仍然存在 所以我的问题是：我对浮动的理解是错误的还是IE的问题 更重要的是，我如何在IE中实现这一点？它一直在折磨着我 <html> <
<html>
<head>
<style type="text/css">
div div { height: 1.3em; }
#wrapper { width: 300px; overflow: hidden; }
div.text { float: right; white-space: nowrap; clear: both; background: white; padding-left: 12px; text-align: left; }
#row1, #row2, #row3, #row4, #row5, #row6 { width: 270px; margin-bottom: 4px; }
#row1 { background: red; }
#row2 { background: blue; }
#row3 { background: green; }
#row4 { background: yellow; }
#row5 { background: pink; }
#row6 { background: gray; }
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.setOnLoadCallback(function() {
$(function() {
$("div.text").animate({ width: "90%" }, 2000);
});
});
</script>
</head>
<body>
<div id="wrapper">
<div class="text">FOO</div><div id="row1"></div>
<div class="text">BAR</div><div id="row2"></div>
<div class="text">THESE PRETZELS ARE</div><div id="row3"></div>
<div class="text">MAKING ME THIRSTY</div><div id="row4"></div>
<div class="text">BLAH</div><div id="row5"></div>
<div class="text">BLAH</div><div id="row6"></div>
</div>
</body>
</html>
div div{高度：1.3em；}
#包装{宽度：300px；溢出：隐藏；}
div.text{float:right；空格：nowrap；clear:both；背景：白色；padding left:12px；text align:left；}
#第1行、第2行、第3行、第4行、第5行、第6行{宽度：270px；边距底部：4px；}
#第1行{背景：红色；}
#第2行{背景：蓝色；}
#第3行{背景：绿色；}
#第4行{背景：黄色；}
#第5行{背景：粉红色；}
#第6行{背景：灰色；}
load（“jquery”，“1.3.2”）；
setOnLoadCallback（函数（）{
$（函数（）{
$（“div.text”）.animate（{width:“90%”），2000年）；
});
});
福
酒吧
这些椒盐卷饼很好吃
让我口渴
废话
废话
宽度：270px如果您真的需要这些彩色条的最大宽度为270像素，您可以使用
max width<html>
<head>
<style type="text/css">
div div { height: 1.3em; }
#wrapper { width: 300px; overflow: hidden; }
div.text { float: right; white-space: nowrap; clear: both; background: white; padding-left: 12px; text-align: left; }
#row1, #row2, #row3, #row4, #row5, #row6 { width: 270px; margin-bottom: 4px; }
#row1 { background: red; }
#row2 { background: blue; }
#row3 { background: green; }
#row4 { background: yellow; }
#row5 { background: pink; }
#row6 { background: gray; }
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.setOnLoadCallback(function() {
$(function() {
$("div.text").animate({ width: "90%" }, 2000);
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="row1"><div class="text">FOO</div></div>
<div id="row2"><div class="text">BAR</div></div>
<div id="row3"><div class="text">THESE PRETZELS ARE</div></div>
<div id="row4"><div class="text">MAKING ME THIRSTY</div></div>
<div id="row5"><div class="text">BLAH</div></div>
<div id="row6"><div class="text">BLAH</div></div>
</div>
</body>
</html>
div div{高度：1.3em；}
#包装{宽度：300px；溢出：隐藏；}
div.text{float:right；空格：nowrap；clear:both；背景：白色；padding left:12px；text align:left；}
#第1行、第2行、第3行、第4行、第5行、第6行{宽度：270px；边距底部：4px；}
#第1行{背景：红色；}
#第2行{背景：蓝色；}
#第3行{背景：绿色；}
#第4行{背景：黄色；}
#第5行{背景：粉红色；}
#第6行{背景：灰色；}
load（“jquery”，“1.3.2”）；
setOnLoadCallback（函数（）{
$（函数（）{
$（“div.text”）.animate（{width:“90%”），2000年）；
});
});
福
酒吧
这些椒盐卷饼很好吃
让我口渴
废话
废话