<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
h2{
margin-top: 30px;
}
</style>
</head>
<body>
<h2>a.使用浮动布局</h2>
<section class="float">
<style>
.float .left{
float: left;
width: 100px;
background-color: red;
}
.float .right{
float: right;
width: 100px;
background-color: blue;
}
.float .center{
background-color: green;
}
</style>
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center
<p>cent</p>
</div>
</section>
<h2>b.使用固定定位</h2>
<section class="position">
<style>
.position{
position: relative;
}
.position .left{
position: absolute;
left: 0;
width: 100px;
background-color: red;
}
.position .right{
position: absolute;
right: 0;
width: 100px;
background-color: blue;
}
.position .center{
margin: 0 100px;
background-color: green;
}
</style>
<div class="left">left
<p>cent</p>
<p>cent</p>
<p>cent</p></div>
<div class="right">righ
css三列布局左
最新推荐文章于 2024-08-12 16:19:20 发布
本文探讨了如何使用CSS创建一个经典的左中右三列布局。内容包括左侧栏、中间主要内容区域和右侧栏的设置,重点在于布局的响应性和兼容性,确保在不同屏幕尺寸下都能良好展示。
摘要由CSDN通过智能技术生成