【技巧】怎么横向撑开父节点
- 背景：父节点需要固定宽度，子节点长度不定，父节点overflow-x:scroll;
- 解决方案：
- 1、js动态计算出子节点的宽度
- 2、方法1显得是有点冗余了，正确的打开方式
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.content{
width:300px;
overflow-x:scroll;
}
.con{
white-space: nowrap;
width: auto;
}
.a{
width: 200px;
height: 200px;
background: #f00;
display: inline-block;
}
</style>
</head>
<body>
<div class="content">
<div class="con">
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
</div>
</div>
</body>
</html>
- 原理：
关键在于：white-space: nowrap;
这个样式的作用常用于让文字不要换行。
这边这样写，就是使子元素中的元素都是inline的状态，然后使其不换行，撑开父节点，这样就能免于js的计算。
兼容性目前没有大面积测过，用过的几个场景暂时没有问题。
本文标题：【技巧】怎么横向撑开父节点
本文链接：https://www.haomeiwen.com/subject/rwuihftx.html
网友评论