CSS实现DIV水平展示
css_1">css代码
css">.container {display: flex; /* 使用 Flexbox */justify-content: space-between; /* 在主轴上均匀排列 */width: 100%; /* 设置容器宽度 */
}
.box {flex:1;
height:100px;
}
HTML代码
<div class="container"><div class="box" style="css language-css">background-color:red">左侧内容</div><div class="box" style="css language-css">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>css">.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="css language-css">background-color:red">左侧内容</div><div class="box" style="css language-css">background-color:gray">中间内容</div><div class="box" style="css language-css">background-color:pink">右侧内容</div></div></body>
</html>
总结
- 1、Flexbox 方法：
使用display: flex;来创建一个弹性盒子布局。
justify-content: space-between;用于在主轴上均匀排列两个 div。
每个 div 设定了宽度和边框样式。- 2、使用
Flexbox对多个div的水平排列比float简单
