数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时装研究
法律研究如何使用 CSS 创建一个 2 列布局网格？
若要创建网页上的 2 列布局网格，我们将创建并定位两个 div，一个在左侧，另一个在右侧。
创建第一个 div
首先，我们将创建一个 div，从左侧 div 开始 −
<div class="left"> <h2>Some random text on the left</h2> </div>
创建第二个 div
创建第 2 个 div，即右侧 div −
<div class="right"> <h2>Some random text on the right</h2> </div>
将 div 定位到左侧和右侧
使用 left 和 right 属性将两个 div 定位到左侧和右侧 −
.left {
left: 0;
background-color: rgb(36, 0, 95);
}
.right {
right: 0;
background-color: rgb(56, 1, 44);
}
修复 div
使用 position 属性的 fixed 值将 div 定位到固定位置 −
.left, .right {
height: 50%;
width: 50%;
position: fixed;
overflow-x: hidden;
padding-top: 20px;
}
示例
若要使用 CSS 创建 2 列布局网格，代码如下 −
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: Arial;
color: white;
}
.left, .right {
height: 50%;
width: 50%;
position: fixed;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background-color: rgb(36, 0, 95);
}
.right {
right: 0;
background-color: rgb(56, 1, 44);
}
</style>
</head>
<body>
<h1 style="color: black;">Two column layout grid example</h1>
<div class="left">
<h2>Some random text on the left</h2>
</div>
<div class="right">
<h2>Some random text on the right</h2>
</div>
</body>
</html>
更新于： 2023 年 11 月 17 日
超过 2K 次浏览
广告