方法 1：使用 Flex 布局
Flex 布局非常适合简单的左右排列。
代码示例
html
HTML 格式
<!DOCTYPE html>
<html>
<head>
<style>
.wrapper {
display: flex; /* 父容器使用flex */
flex-direction: row; /* 水平排列 */
width: 100%; /* 占满宽度 */
}
.container-left {
width: 50%; /* 左边占一半 */
height: 200px;
background: lightblue;
}
.container-right {
width: 50%; /* 右边占一半 */
height: 200px;
background: lightcoral;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container-left">左边容器</div>
<div class="container-right">右边容器</div>
</div>
</body>
</html>
关键点
-
display: flex：使父容器成为 Flex 容器。
-
flex-direction: row：确保子元素水平排列（默认值，可省略）。
-
width: 50%：让两个容器各占一半宽度，你也可以用固定值（如 200px）或 flex 属性动态分配。
灵活调整宽度
如果你想让宽度更灵活，可以使用 flex 属性：
css
CSS 服务
.container-left {
flex: 1; /* 动态分配剩余空间 */
height: 200px;
background: lightblue;
}
.container-right {
flex: 2; /* 右边宽度是左边的两倍 */
height: 200px;
background: lightcoral;
}
方法 2：使用 Grid 布局
Grid 布局适合更复杂的二维布局，但也可以轻松实现左右排列。
代码示例
html
HTML 格式
<!DOCTYPE html>
<html>
<head>
<style>
.wrapper {
display: grid; /* 父容器使用grid */
grid-template-columns: 1fr 1fr; /* 两列，等分 */
width: 100%;
}
.container-left {
height: 200px;
background: lightblue;
}
.container-right {
height: 200px;
background: lightcoral;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container-left">左边容器</div>
<div class="container-right">右边容器</div>
</div>
</body>
</html>
关键点
-
display: grid：使父容器成为 Grid 容器。
-
grid-template-columns: 1fr 1fr：定义两列，每列等分（1fr 表示一份）。你也可以用固定值（如 200px 200px）或混合单位（如 200px 1fr）。
-
Grid 默认会将子元素填充到定义的网格中。
灵活调整宽度
可以用不同的比例或固定值：
css
CSS 服务
.wrapper {
display: grid;
grid-template-columns: 200px 1fr; /* 左边固定200px，右边占剩余空间 */
}
方法 3：浮动（传统方法，不推荐）
虽然可以用 float 实现左右排列，但它不如 Flex 或 Grid 现代和灵活。如果需要兼容非常老的浏览器，可以参考：
css
CSS 服务
.container-left {
float: left;
width: 50%;
height: 200px;
background: lightblue;
}
.container-right {
float: left;
width: 50%;
height: 200px;
background: lightcoral;
}
但建议优先使用 Flex 或 Grid，因为它们更易维护且功能更强大。
Flex vs Grid 选择建议
-
用 Flex：如果只是简单的左右排列，Flex 更直观，代码更简洁。
-
用 Grid：如果需要更复杂的布局（比如将来可能加行或列），或者需要精确控制网格线，Grid 更合适。
附加功能
-
间距：可以在 wrapper 上加 gap：
css
CSS 服务.wrapper { display: flex; gap: 10px; /* 左右容器间距 */ } -
居中：可以用 justify-content（Flex）或 justify-items（Grid）调整对齐：
css
CSS 服务.wrapper { display: flex; justify-content: center; /* 水平居中 */ }
最终示例（带间距和动态宽度）
html
HTML 格式
<!DOCTYPE html>
<html>
<head>
<style>
.wrapper {
display: flex;
gap: 10px;
width: 100%;
}
.container-left {
flex: 1;
height: 200px;
background: lightblue;
text-align: center;
}
.container-right {
flex: 1;
height: 200px;
background: lightcoral;
text-align: center;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container-left">左边容器</div>
<div class="container-right">右边容器</div>
</div>
</body>
</html>