二栏布局之左侧固定右侧自适应布局方案
2018-03-22 本文已影响0人
阿古瓜
1.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style media="screen">
body {
margin: 0;
padding: 0;
}
.left {
height: 100px;
background-color: pink;
}
.main {
height: 100px;
background-color: #5fcfcd;
}
.layout {
margin: 10px 0;
border: 5px solid grey;
}
</style>
</head>
<body>
<section class="layout float">
<!-- 浮动布局方案 -->
<style type="text/css">
.layout.float .page {
zoom: 1;
}
.layout.float .page::after {
content: '';
display: block;
clear: both;
}
.layout.float .left {
float: left;
width: 150px;
margin-right: 10px;
}
.layout.float .main {
overflow: auto;
}
</style>
<article class="page">
<div class="left">浮云布局--左侧固定内容框</div>
<div class="main">浮云布局--右侧自适应内容框</div>
</article>
</section>
<section class="layout absolute">
<!-- 绝对定位布局
最大缺陷： 父级高度无法撑开；
-->
<style type="text/css">
.layout.absolute .page {
position: relative;
}
.layout.absolute .left {
position: absolute;
width: 150px;
}
.layout.absolute .main {
position: absolute;
left: 160px;
right: 0;
}
</style>
<article class="page">
<div class="left">绝对定位布局--左侧固定内容框</div>
<div class="main">绝对定位布局--右侧自适应内容框</div>
</article>
</section>
<section class="layout flex" style="margin-top:110px;">
<!-- flex 布局方案 -->
<style type="text/css">
.layout.flex .page {
display: flex;
}
.layout.flex .left {
flex-basis: 150px;
}
.layout.flex .main {
flex: 1;
}
</style>
<article class="page">
<div class="left">flex布局--左侧固定内容框</div>
<div class="main">flex布局--右侧自适应内容框</div>
</article>
</section>
<section class="layout table">
<!-- table布局布局方案 -->
<style type="text/css">
.layout.table .page {
display: table;
width: 100%;
}
.layout.table .left {
display: table-cell;
width: 150px;
}
.layout.table .main {
display: table-cell;
}
</style>
<article class="page">
<div class="left">table布局--左侧固定内容框</div>
<div class="main">table布局--右侧自适应内容框</div>
</article>
</section>
<section class="layout grid">
<!-- grid布局方案 -->
<style type="text/css">
.layout.grid .page {
display: grid;
grid-template-columns: 150px auto;
}
</style>
<article class="page">
<div class="left">grid布局--左侧固定内容框</div>
<div class="main">grid布局--右侧自适应内容框</div>
</article>
</section>
</body>
</html>
