float布局
<html>
<head>
<style>
html *{
padding:0;
margin: 0;
}
section{
margin-bottom: 20px;
}
.layout article div{
min-height: 200px;
}
</style>
</head>
<body>
<section class="layout float">
<style>
.layout.float .left{
float: left;
background: #ccc;
width: 300px;
}
.layout.float .right{
margin-left: 300px;
background: #eee;
}
</style>
<article class="left-right">
<div class="left">
<h2>浮动解决方案</h2>
<p>这是两栏布局的解决方案</p>
<p>这是两栏布局的解决方案</p>
<p>这是两栏布局的解决方案</p>
</div>
<div class="right">
<h2>浮动解决方案</h2>
<p>这是两栏布局的解决方案</p>
<p>这是两栏布局的解决方案</p>
<p>这是两栏布局的解决方案</p>
<p>这是两栏布局的解决方案</p>
<p>这是两栏布局的解决方案</p>
</div>
</article>
</section>
</body>
</html>
position布局
<html>
<head>
<style>
html *{
padding:0;
margin: 0;
}
section{
margin-bottom: 20px;
}
.layout article div{
min-height: 200px;
}
</style>
</head>
<body>
<section class="layout absolute">
<style>
.layout.absolute .left{
position: absolute;
width:300px;
background: #ccc;
left: 0;
}
.layout.absolute .right{
background: #eee;
position: static;
margin-left: 300px;
}
</style>
<article class="left-right">
<div class="left">
<h2>pisition解决方案</h2>
<p>这是两栏布局的解决方案</p>
<p>这是两栏布局的解决方案</p>
<p>这是两栏布局的解决方案</p>
</div>
<div class="right">
<h2>pisition解决方案</h2>
<p>这是两栏布局的解决方案</p>
<p>这是两栏布局的解决方案</p>
<p>这是两栏布局的解决方案</p>
<p>这是两栏布局的解决方案</p>
<p>这是两栏布局的解决方案</p>
</div>
</article>
</section>
</body>
</html>
flex布局
<html>
<head>
<style>
html *{
padding:0;
margin: 0;
}
section{
margin-bottom: 20px;
}
.layout article div{
min-height: 200px;
}
</style>
</head>
<body>
<section class="layout flex">
<style>
.layout.flex .left-right{
display: flex;
}
.layout.flex .left{
background: #ccc;
width: 300px;
}
.layout.flex .right{
background: #eee;
flex: 1;
}
</style>
<article class="left-right">
<div class="left">
<h2>flex解决方案</h2>
<p>这是两栏布局的解决方案</p>
<p>这是两栏布局的解决方案</p>
<p>这是两栏布局的解决方案</p>
</div>
<div class="right">
<h2>flex解决方案</h2>
<p>这是两栏布局的解决方案</p>
<p>这是两栏布局的解决方案</p>
<p>这是两栏布局的解决方案</p>
<p>这是两栏布局的解决方案</p>
<p>这是两栏布局的解决方案</p>
</div>
</article>
</section>
</body>
</html>
table布局
<html>
<head>
<style>
html *{
padding:0;
margin: 0;
}
section{
margin-bottom: 20px;
}
.layout article div{
min-height: 200px;
}
</style>
</head>
<body>
<section class="layout table">
<style>
.layout.table .left-right{
display: table;
table-layout: fixed;
width: 100%;
}
.layout.table .left-right>div{
display: table-cell;
}
.layout.table .left{
background: #ccc;
width: 300px;
}
.layout.table .right{
background: #eee;
}
</style>
<article class="left-right">
<div class="left">
<h2>table解决方案</h2>
<p>这是两栏布局的解决方案</p>
<p>这是两栏布局的解决方案</p>
<p>这是两栏布局的解决方案</p>
</div>
<div class="right">
<h2>table解决方案</h2>
<p>这是两栏布局的解决方案</p>
<p>这是两栏布局的解决方案</p>
<p>这是两栏布局的解决方案</p>
<p>这是两栏布局的解决方案</p>
<p>这是两栏布局的解决方案</p>
</div>
</article>
</section>
</body>
</html>
grid布局
<html>
<head>
<style>
html *{
padding:0;
margin: 0;
}
section{
margin-bottom: 20px;
}
.layout article div{
min-height: 200px;
}
</style>
</head>
<body>
<section class="layout grid">
<style>
.layout.grid .left-right{
display: grid;
width: 100%;
grid-template-rows: 300px;
grid-template-columns: 300px auto;
}
.layout.grid .left{
background: #ccc;
width: 300px;
}
.layout.grid .right{
background: #eee;
}
</style>
<article class="left-right">
<div class="left">
<h2>grid解决方案</h2>
<p>这是两栏布局的解决方案</p>
<p>这是两栏布局的解决方案</p>
<p>这是两栏布局的解决方案</p>
</div>
<div class="right">
<h2>grid解决方案</h2>
<p>这是两栏布局的解决方案</p>
<p>这是两栏布局的解决方案</p>
<p>这是两栏布局的解决方案</p>
<p>这是两栏布局的解决方案</p>
<p>这是两栏布局的解决方案</p>
</div>
</article>
</section>
</body>
</html>
