我遇到浮动div和IE7的问题。例如,以下HTML代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' lang='en' xml:lang='en'>
<head>
<title>IE Float Test</title>
<style>
.container {
width: 200px;
background: #ddd;
overflow: hidden;
}
.item {
float: left;
padding: 5px;
background: #eee;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">This is a item</div>
<div class="item">This is another item</div>
<div class="item">Last item</div>
</div>
</body>
</html>
在chrome(以及其他主流浏览器)中提供以下内容:
但是,IE7中的以下内容:
如果项目div太宽,如何让IE7将项目div移动到下一个垂直位置?
非常感谢,约翰。
答案 0 :(得分:4)
将white-space: nowrap
添加到.item
有效:http://jsbin.com/ifexuf/2
这可以接受吗?
答案 1 :(得分:0)
您需要将min-width属性添加到.item
答案 2 :(得分:0)
如果您希望堆叠的项目,则不需要在“.item”CSS样式中使用“float:left”。像<div>
这样的块级元素默认显示为堆叠。