display: box让多个div并排显示

最新推荐文章于 2024-03-28 15:35:59 发布

Enternity-Yu

最新推荐文章于 2024-03-28 15:35:59 发布

阅读量551

点赞数

分类专栏：前端文章标签： html css

本文链接：https://blog.csdn.net/weixin_43912081/article/details/119575519

版权

前端专栏收录该内容

37 篇文章 1 订阅

订阅专栏

在平时做项目的时候常常会用到让多个div并排显示
有多种方法可以解决此问题，本人已更新最新文章（多种方法解决div并排显示问题）
这里主要以display: box示例

如图让三个不同颜色的div并排显示在框内
在这里插入图片描述
此刻的代码为：

 <style>
   .btns{
      width: 300px;
      border: 1px solid black;
    }
    #btn1, #btn2, #btn3{
      width: 100px;
    }
</style>

 <div class="btns">
    <div id="btn1" style="background-color: red;">button-1</div>
     <div id="btn2" style="background-color: blue">button-2</div>
     <div id="btn3" style="background-color: orange">button-3</div>
 </div>

要想让三个div并排显示
可以在三个div的父元素（btns)的style中添加 display: -webkit-box;
结果如图：

在这里插入图片描述

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多个div并排显示</title>
    <script type="text/javascript" src="js/vue.js"></script>
    <style>
        .btns{
          width: 300px;
          border: 1px solid black;
          display: -webkit-box;  // 控制div并排显示
        }
        #btn1, #btn2, #btn3{
          width: 100px;
        }
    </style>
</head>
<body>
    <div class="btns">
        <div id="btn1" style="background-color: red;">button-1</div>
        <div id="btn2" style="background-color: blue">button-2</div>
        <div id="btn3" style="background-color: orange">button-3</div>
    </div>
    
</body>

</html>

Enternity-Yu

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
display: box让多个div并排显示

在平时做项目的时候常常会用到让多个div并排显示如图让三个不同颜色的div并排显示在框内此刻的代码为： <style> .btns{ width: 300px; border: 1px solid black; } #btn1, #btn2, #btn3{ width: 100px; }</style> <div class="btns"> <div id="btn1" sty
复制链接

扫一扫