前端将两个div在一个长为500px，高为300px的div里面并列居中对齐。

Januea

于 2024-03-20 09:28:23 发布

阅读量305

点赞数 3

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/Januea/article/details/136863405

版权

前端将两个div在一个长为500px，高为300px的div里面并列居中对齐。

要实现将两个 div 元素放置在一个长为500px，高为300px的父 div 中，一个在左边，一个在右边，并且居中对齐，可以使用Flexbox布局来实现。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div Layout Example</title>
<style>
.container {
  display: flex;
  width: 500px;
  height: 300px;
  justify-content: center;
}

.left-div {
  width: 50%;
  height: 100%;
  background-color: lightblue;
}

.right-div {
  width: 50%;
  height: 100%;
  background-color: lightcoral;
}
</style>
</head>
<body>
<div class="container">
  <div class="left-div">Left Div</div>
  <div class="right-div">Right Div</div>
</div>
</body>
</html>

在这个示例中：
(1)我们使用Flexbox布局将父 div 设置为 display: flex; ，这样它的子元素会在水平方向上排列。
(2) 通过 justify-content: center; 属性，我们将子元素居中对齐。
(3)左侧 div 和右侧 div 各占父 div 宽度的50%，从而实现一个在左边，一个在右边的布局。
(4) 左侧 div 的背景颜色为淡蓝色，右侧 div 的背景颜色为淡珊瑚色。