CSS-如何强制多个div并列且不换行(不是内容不换行)

项目合作 项目合作 主题:1030 回复:2135

CSS-如何强制多个div并列且不换行(不是内容不换行)

偏爱自由 发布于 2017-02-12 字数 1108 浏览 1050 回复 2

如何强制多个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>

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

支持 Markdown 语法,需要帮助?

评论(2

想挽留 2017-10-23 2 楼

使用绝对定位

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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>

晚风撩人 2017-04-15 1 楼

就单纯以你这个为例,最简单的实现方案就是

<style style="text/css">
.divTest{
height:28px;
line-height:28px;
color:#fff;
font-size:12px;
background:#000;
padding:0 10px;
border-right:15px solid #FF0000;
}
</style>
<div class="divTest>test content</div>

直接当作边框处理,你自己可以尝试看一下,这种实现方式是否适合你~