m0_53299789
2021-09-17 22:55
采纳率: 100%
浏览 47
已结题

如何CSS中div排在同一行

大佬们,像上图这种,加条什么语句可以达到第二个图的效果呢,div{display:inline;}的效果是1234abc在同一排,那像第二张图这种效果的能实现嘛 小白弄了一晚上没弄明白,感谢解答

img

img

  • 收藏

4条回答 默认 最新

  • 已采纳

    两个外面div设置float: left;浮动
    你题目的解答代码如下:(如有帮助,望采纳!谢谢! 点击我这个回答右上方的【采纳】按钮)

    <!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,chrome=1" />
        <title> 页面名称 </title>
    <style type="text/css">
    .final {
        float: left;
        width: 100px;
    }
    </style>
    </head>
    <body>
    
    <div class="final">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
    <div class="final">
        <div>a</div>
        <div>b</div>
        <div>c</div>
    </div>
    
    </body>
    </html>
    

    img

    已采纳该答案
    1 打赏 评论
  • 
    <style type="text/css">
    .final {
        float: left;
        width: 100px;
    }
    </style>
    
    1 打赏 评论
  • 前端菜小白leo 2021-09-17 23:20

    个人比较喜欢用flex布局,适应性强,并且不脱离文档流,不会影响下面的布局

    
    <!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,chrome=1" />
        <title> 页面名称 </title>
    <style type="text/css">
    .flexBox {
        display:flex;
        justify-content:flex-start;
    }
    </style>
    </head>
    <body>
    <div class="flexBox">
    <div class="final">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
    <div class="final">
        <div>a</div>
        <div>b</div>
        <div>c</div>
    </div>
    </div>
    </body>
    </html>
    
    1 打赏 评论
  • 本堃不方 2021-09-18 10:59

    平常用的话就是楼上说的用弹性盒子,一般情况下都会用UI库的栅格布局

    1 打赏 评论

相关推荐 更多相似问题