如何强制多个div并列且不换行（不是内容不换行）
如何强制多个div并列且不换行，div里内容不固定，div遇到浏览器边框时不换行，且body出现滚动条，实现与table类似的效果（效果对比如下）
1、用div写
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>测试</title>
<style type="text/css">
*{ margin:0; padding:0;}
body{ overflow-x:auto; overflow-y:hidden;}
.Container{height:28px; line-height:28px; color:#fff; font-size:12px; position:absolute; left:700px; top:450px;white-space:nowrap;}
.Left{float:left; height:28px; background:#000000; padding:0 10px;}
.Right{float:left; width:15px; height:28px;background:#ff0000;;}
</style>
</head>
<body>
<div class="Container">
<div class="Left">测试测试</div>
<div class="Right"></div>
</div>
</body>
</html>
效果图，黑色容器内有文字，红色容器内为空，红色遇到边缘后换行
2、在用table改写
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>测试</title>
<style type="text/css">
*{ margin:0; padding:0;}
body{ overflow-x:auto; overflow-y:hidden;}
.Container{height:28px; line-height:28px; color:#fff; font-size:12px; position:absolute; left:700px; top:450px;white-space:nowrap;}
.Left{float:left; height:28px; background:#000000; padding:0 10px;}
.Right{float:left; width:15px; height:28px;background:#ff0000;;}
</style>
</head>
<body>
<div class="Container">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div class="Left">测试测试</div></td>
<td><div class="Right"></div></td>
</tr>
</table>
</div>
</body>
</html>
效果图，table改写后，红色容器遇到边缘不换行，body出现横向滚动条。
用div如何也能实现table的效果呢，浮动后遇到边缘不换行（注意最外层div没有设置宽度，因为不知道内容多少，内容超出后让body出现滚动条）
金君君馆长
12 years, 6 months ago
Answers
使用绝对定位
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>测试</title>
<style type="text/css">
*{ margin:0; padding:0;}
body{ overflow-x:auto; overflow-y:hidden;}
.Container{height:28px; line-height:28px; color:#fff; font-size:12px; position:absolute; left:700px; top:450px;white-space:nowrap;}
.Left{float:left; width:100px; height:28px; background:#000000; padding:0 10px;}
.Right{position:absolute;float:left; left:130px; width:15px; height:28px;background:#ff0000;}
</style>
</head>
<body>
<div class="Container">
<div class="Left">测试测试</div>
<div class="Right"></div>
</div>
</body>
</html>
Magicxk
answered 12 years, 6 months ago
