CSS实现DIV水平展示

news2024/11/15 13:31:18

CSS实现DIV水平展示

css代码

.container {
    display: flex; /* 使用 Flexbox */
    justify-content: space-between; /* 在主轴上均匀排列 */
    width: 100%; /* 设置容器宽度 */
}
.box {
    flex:1;
height:100px;
}

HTML代码

<div class="container">
    <div class="box" style="background-color:red">左侧内容</div>
    <div class="box" style="background-color:pink">右侧内容</div>
</div>

显示效果

在这里插入图片描述
如果是需要是三个或者是更多的div，也可以也可以直接添加div即可，例如三个

<div class="container">
     <div class="box" style="background-color:red">左侧内容</div>
     <div class="box" style="background-color:gray">中间内容</div>
     <div class="box" style="background-color:pink">右侧内容</div>
 </div>

效果如下
在这里插入图片描述
这样子我们就没有使用float的烦恼啦！

完整代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>左右排列的 DIV 示例</title>
    <style>
        .container {
            display: flex; /* 使用 Flexbox */
            justify-content: space-between; /* 在主轴上均匀排列 */
            width: 100%; /* 设置容器宽度 */
        }
        .box {
            flex:1;
			height:100px;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="box" style="background-color:red">左侧内容</div>
		<div class="box" style="background-color:gray">中间内容</div>
        <div class="box" style="background-color:pink">右侧内容</div>
    </div>

</body>
</html>

总结

1、Flexbox 方法：
使用 display: flex; 来创建一个弹性盒子布局。
justify-content: space-between; 用于在主轴上均匀排列两个 div。
每个 div 设定了宽度和边框样式。
2、使用Flexbox 对多个div的水平排列比float简单