<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两列布局_右侧固定_左侧自适应</title>
<style type="text/css">
.right{
width: 200px;
height: 600px;
background-color: aqua;
float: right;
}
.main{
height: 600px;
background-color: #8B4513;
margin-right: 200px;
}
</style>
</head>
<body>
<h2>基本思路</h2>
<ol>
<li>左侧固定,并设置为左浮动</li>
<li>右侧主体部分设置一个左边距,它的宽度只要大于等于左侧的宽度就可以</li>
</ol>
<!-- DOM -->
<div class="right">右侧</div>
<div class="main">主体</div>
</body>
</html>
两列布局_右侧固定_左侧自适应
最新推荐文章于 2024-08-10 16:15:00 发布