H5+CSS3+JS逆向前置——DIV+CSS百分比布局
在CSS中，百分比布局允使元素的宽度、高度或者位置根据父元素的宽度、高度的百分比来设置。这是一种灵活的布局方式，适用于响应式设计。
以下是一个简单的HTML和CSS代码示例，演示了如何使用百分比布局来创建一个基本的三列布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>百分比布局示例</title>
<style>
.container {
width: 100%;
height: 300px;
}
.column {
float: left;
position: relative;
}
.column-1 {
width: 33.33%;
background-color: #f9f9f9;
box-sizing: border-box;
padding: 10px;
}
.column-2 {
width: 33.33%;
background-color: #f4f4f4;
box-sizing: border-box;
padding: 10px;
}
.column-3 {
width: 33.33%;
background-color: #fafafa;
box-sizing: border-box;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="column column-1">Column 1</div>
<div class="column column-2">Column 2</div>
<div class="column column-3">Column 3</div>
</div>
</body>
</html>在这个例子中，.container 是一个包含块，.column 是列的基本样式，.column-1、.column-2 和 .column-3 分别为三列设置了背景色和内边距。每个.column 的宽度被设置为33.33%，这意味着每个列会占据父元素宽度的三分之一。使用box-sizing: border-box;可以确保内边距和边框不会导致列宽超出百分比指定的宽度。
评论已关闭