数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济
心理学
社会科学
时尚研究
法律研究如何使用 CSS 创建等高列？
在网页的父级 div 中可以创建等高列。首先，将父容器设置为一个宽度为 100% 的表格。在其内，创建列并设置显示属性为表格单元格。我们来看看如何使用 HTML 和 CSS 创建等高列。
创建一个父容器
<div class="container">
<div class="column">
<h2>Column 1</h2>
<h2>Column 1</h2>
<h2>Column 1</h2>
</div>
<div class="column">
<h2>Column 2</h2>
<h2>Column 2</h2>
<h2>Column 2</h2>
</div>
<div class="column">
<h2>Column 3</h2>
<h2>Column 3</h2>
<h2>Column 3</h2>
</div>
</div>
将父容器的样式设置成表格
使用值 table 的 display 属性创建一个作为表格的父级 div -
.container {
display: table;
width: 100%;
}
创建列 1
为第 1 列创建一个子级 div -
<div class="column"> <h2>Column 1</h2> <h2>Column 1</h2> <h2>Column 1</h2> </div>
创建列 2
为第 2 列创建一个子级 div -
<div class="column"> <h2>Column 2</h2> <h2>Column 2</h2> <h2>Column 2</h2> </div>
创建列 3
为第 3 列创建一个子级 div -
<div class="column"> <h2>Column 3</h2> <h2>Column 3</h2> <h2>Column 3</h2> </div>
设置每个列的样式
每个列都以 table-cell 属性进行显示 -
.column {
display: table-cell;
padding: 16px;
background-color: greenyellow;
}
示例
要使用 CSS 创建等高列，代码如下 -
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.container {
display: table;
width: 100%;
}
.column {
display: table-cell;
padding: 16px;
background-color: greenyellow;
}
.column:nth-of-type(2n-1) {
color: red;
background-color: yellow;
}
</style>
</head>
<body>
<h1>Equal Height Columns Example</h1>
<div class="container">
<div class="column">
<h2>Column 1</h2>
<h2>Column 1</h2>
<h2>Column 1</h2>
</div>
<div class="column">
<h2>Column 2</h2>
<h2>Column 2</h2>
<h2>Column 2</h2>
</div>
<div class="column">
<h2>Column 3</h2>
<h2>Column 3</h2>
<h2>Column 3</h2>
</div>
</div>
</body>
</html>
更新时间： 2023 年 12 月 14 日
914 次浏览
广告