父容器溢出滚动，子DIV横向排列如何实现？
心靈之曲
发布： 2024-11-05 17:27:51
原创
732人浏览过
如何实现父容器溢出滚动，子div横向排列
这个问题可以采用 css 中的 overflow-x 和 white-space 属性来解决。
在父容器 .ctn 中，设置 overflow-x: scroll;，表示容器水平方向上的内容超出宽度时显示滚动条。同时设置 white-space: nowrap;，表示子元素不会换行。
对于子 div，使用 display: inline-block，表示子元素在水平方向上排列，并且不会占据整个可用空间。
示例代码：
.ctn {
overflow-x: scroll;
white-space: nowrap;
width: 100%;
}
.div1,
.div2,
.div3 {
display: inline-block;
}登录后复制
以上就是父容器溢出滚动，子DIV横向排列如何实现？的详细内容，更多请关注php中文网其它相关文章！
最佳 Windows 性能的顶级免费优化软件
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
来源：php中文网
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
816
热门推荐
广告
收藏
