本文主要是介绍如何让多个div横向排列而不换行，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
现象
- 多个div排列在一行，包裹的框宽度不足时，那么会换行显示
- 如图
解决
- 关键点在于
white-space: nowrap;的使用 - 效果
代码
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>demo</title> </head> <style type="text/css">* {margin: 0;padding: 0;}.t-ctn {width: 100%;overflow-x: auto;}.t-ctn .s-ctn {height: 150px;white-space: nowrap;font-size: 0;}.t-ctn .s-ctn div {font-size: 14px;box-sizing: border-box;white-space: normal;word-wrap: break-word;word-break: break-all;overflow: hidden;display: inline-block;width: 200px;height: 100%;border: 10px solid red;} </style><body><div class="t-ctn"><div class="s-ctn"><div><p>titletitletitletitletitletitletitletitletitletitletitletitletitle</p><p>body</p><img src="./logo.png" alt=""></div><div><p>title</p><p>body</p></div><div><p>title</p><p>body</p></div><div><p>title</p><p>body</p></div><div><p>title</p><p>body</p></div><div><p>title</p><p>body</p></div><div><p>title</p><p>body</p></div><div><p>title</p><p>body</p></div><div><p>title</p><p>body</p></div><div><p>title</p><p>body</p></div><div><p>title</p><p>body</p></div></div></div> </body></html>
这篇关于如何让多个div横向排列而不换行的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
