实现 “块标签横向显示(同一行)” 的四种方法

最新推荐文章于 2023-01-02 17:54:08 发布

阿喵超咸

最新推荐文章于 2023-01-02 17:54:08 发布

阅读量1.7k

点赞数 2

文章标签： html css

本文链接：https://blog.csdn.net/weixin_43166635/article/details/107299958

版权

实现 “块标签横向(同一行)显示” 的四种方法

浮动（float:left）
绝对定位（position:absolute /fixed）
弹性布局（dispaly: flex）
inline-block布局（display:inline-block）

—（＞人＜；）——个人总结，若有不当或错误，请留言批评指正。

先看下未实现前的简单例子：

<head>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .I {
            width: 500px;
            height: 400px;
            background-color: black;
        }

        .II {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .III {
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div class="I">
        <div class="II"></div>
        <div class="III"></div>
    </div>
</body>

效果图：
在这里插入图片描述
方法一： 浮动（子元素都加上float:left）

缺点：

父元素高度坍塌，需清除浮动（父元素加上overflow:hidden）
子元素间没有间距（子元素加上margin-right:数值px）

代码：

.II {
            float: left;    //补充上
            }
.III {
            float: left;    //补充上
            }

效果图：
在这里插入图片描述
方法二： 绝对定位（变动的子元素加上position:absolute /fixed）

代码：

.III {
       position: absolute;    //补充上
       top: 0;
       left: 200px; 
      }

效果图：
在这里插入图片描述

方法三： 弹性布局（父元素加上dispaly: flex）

缺点：
子元素的float、clear和vertical-align属性将失效

优点：
可实现子元素等距分隔【六大属性了解下】

代码1：

.I {
       display:flex;    //补充上
      }

效果图1：
在这里插入图片描述
代码2：

.I {
      display:flex;    
      justify-content: space-between;   // 补充上。实现等距分隔
      }

效果图2：
在这里插入图片描述

方法四： inline-block布局（子元素都加上display:inline-block）

优点：
子元素间自带间距(4px,可通过添加font-size:0解决)

代码：

.II {
       display: inline-block;    //补充上
            }
.III {
      display: inline-block;    //补充上
            }

在这里插入图片描述
~~题外话:~~
display:flex 与 position:absolute/fixed 共存冲突
解决方式：给外层盒子设置宽度，width:100%

💨

阿喵超咸

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
实现 “块标签横向显示(同一行)” 的四种方法

实现 “块标签横向(同一行)显示” 的四种方法浮动（float:left）绝对定位（position:absolute /fixed）弹性布局（dispaly: flex）inline-block布局（display:inline-block）———————————————————————(●ˇ∀ˇ●)先看下未实现前的简单例子：<head> <style> body { margin: 0; p
复制链接

扫一扫