CSS写代码将页面分为左右两个部分
您可以使用CSS Flexbox或Grid来将页面分成两个部分。以下是使用Flexbox的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Split Page into Two Parts</title>
<style>
.container {
display: flex;
height: 100vh; /* Full height of the viewport */
}
.left-side {
flex: 1; /* Takes up 1/2 of the space */
background-color: #f00; /* Red background */
}
.right-side {
flex: 1; /* Takes up 1/2 of the space */
background-color: #0f0; /* Green background */
}
</style>
</head>
<body>
<div class="container">
<div class="left-side">
Left Side Content
</div>
<div class="right-side">
Right Side Content
</div>
</div>
</body>
</html>这段代码会创建一个垂直分割的页面，左右两边各占50%的宽度。您可以根据需要自定义背景颜色、内容等。
评论已关闭