之前项目上有个需求就是:多个div在一个容器下横向布局,且实现滚动效果。(兼容ie浏览器,所以不能使用flex布局)
首先想到的是overflow-x:auto或者scroll。但是这里的需求它无法满足,因为这个属性适用于类似文本的内容,就好比
<div>测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据</div>
如果这里的文字超出了div的宽度,设置这个属性是没有问题的,但是目前的需求是想让如下的项目们都能排成一排
<div id='a1'>
<div class="b1">项目1</div>
<div class="b1">项目2</div>
<div class="b1">项目3</div>
<div class="b1">项目4</div>
<div class="b1">项目5</div>
<div class="b1">项目6</div>
</div>
用一个中间容器包起来,就解决了,奉上代码!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#a1 {
width: 500px;
height: 500px;
background: black;
overflow-x: auto;
}
#b1 {
width: 800px;
}
.b1 {
float: left;
width: 100px;
height: 100px;
background: red;
border: 2px solid white
}
</style>
</head>
<body>
<div id='a1'>
<div id='b1'>
<div class="b1">项目1</div>
<div class="b1">项目2</div>
<div class="b1">项目3</div>
<div class="b1">项目4</div>
<div class="b1">项目5</div>
<div class="b1">项目6</div>
</div>
</div>
</body>
</html>
最终效果