老师~我发现三栏布局还有一种方法

来源：3-10 原型链（一）

幕木_

2018-06-24

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>Layout</title>
<style media="screen">
html * {
padding: 0;
margin: 0;
}

div {
min-height: 100px;
}

section {
font-size: 0
}

section div {
display: inline-block;
vertical-align: bottom;
}

section .left {
background: lemonchiffon
}

section .right {
background: lightgreen
}

section .center {
background: lightsalmon;
font-size: 16px;

}

section .left,
      section .right {
width: 300px;
}

section .center {
width: calc(100% - 600px)
}
</style>
</head>

<body>





<section>
<div class="left"></div>
<div class="center">
<h2>浮动解决方案</h2>
1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；

</div>
<div class="right"></div>
</section>


</body>

</html>

写回答

1回答