<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div {
text-align: center;
}
#main {
background-color: #ddd;
width: 100%;
}
#main #main-wrapper {
margin-right: 50px;
margin-left: 100px;
}
#right {
background-color: green;
width: 50px;
margin-left: -50px;
}
#left {
background-color: orange;
width: 100px;
margin-left: -100%;
}
.column {
float: left;
}
</style>
<body>
<!-- 目的 -->
<!-- 1.两侧内容固定,中间内容宽度自适应 -->
<!-- 2.三栏布局,中间一栏先加载、渲染出来 -->
<h1>双飞翼布局</h1>
<div id="main" class="column">
<div id="main-wrapper">Main</div>
</div>
<div id="left" class="column">Left</div>
<div id="right" class="column">Right</div>
</body>
</html>
css-双飞翼布局
最新推荐文章于 2023-09-19 19:46:20 发布