css两个div如何左右并排

作者：刀魂使者发布日期:2026-04-22 浏览:104

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS两个div左右并排</title>
    <style>
        /* 使用flex布局实现两个div左右并排 */
        .container {
            display: flex;
            justify-content: space-between; /* 子元素之间留有空隙 */
        }

        .box {
            width: 45%; /* 设置每个div的宽度 */
            background-color: lightblue; /* 背景颜色 */
            padding: 20px;
            box-sizing: border-box; /* 确保padding不会增加元素的实际宽度 */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">左边的div</div>
        <div class="box">右边的div</div>
    </div>
</body>
</html>

解释说明：

HTML结构：使用了一个父级容器<div class="container">，里面包含两个子元素<div class="box">。
CSS样式：
- .container 使用了 display: flex; 来启用弹性盒布局，使子元素可以水平排列。
- justify-content: space-between; 让两个子元素之间保持一定的间距。
- 每个 .box 的宽度设置为 45%，确保它们能够在同一行显示，并且留有一定的间隔。
- padding 和 box-sizing: border-box; 确保内边距不会影响元素的总宽度。

通过这种方式，两个 div 可以实现左右并排的效果。

上一篇：css 粗体

下一篇：css 灰色