如何让多个div横向排列而不换行

Posted vcxiaohan2

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何让多个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横向排列而不换行的主要内容,如果未能解决你的问题,请参考以下文章

如何使ul中li元素横向排列且不换行

怎样让一个div里的多个div横向排列

求ul中的li布局CSS布局,横向垂直都要居中,如何实现?

多个DIV自动横向排列如何自动撑开父级DIV并出现横向滚动条? 父级div就固定了宽,当内容多时自动出滚动条

如何让div中的内容横向排列

知识库