等高布局
1、使用margin负边距：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style type="text/css">
.parent{
position:relative;
overflow:hidden;
}
.left{
background:red;
left:0px;
}
.center{
background:yellow;
}
.right{
background:green;
}
.left,.center,.right{
float:left;
padding-bottom: 500px;
margin-bottom: -500px;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="center">
<p>center</p>
<p>center</p>
</div>
<div class="right">
<p>right</p>
</div>
</div>
</body>
</html>?2、使用table
<html>
<head>
<style type="text/css">
body,p{margin: 0;}
.parent{
display: table;
width: 100%;
table-layout: fixed;
}
.left,.centerWrap,.right{
display: table-cell;
}
.center{
margin: 0 20px;
}
</style>
</head>
<body>
<div class="parent" style="background-color: lightgrey;">
<div class="left" style="background-color: lightblue;">
<p>left</p>
</div>
<div class="centerWrap">
<div class="center" style="background-color: pink;">
<p>center</p>
<p>center</p>
</div>
</div>
<div class="right" style="background-color: lightgreen;">
<p>right</p>
</div>
</div>
</body>
</html>3、使用flex
<html>
<head>
<style>
body,p{margin: 0;}
.parent{
display: flex;
}
.left,.center,.right{
flex: 1;
}
.center{
margin: 0 20px;
}
</style>
</head>
<body>
<div class="parent" style="background-color: lightgrey;">
<div class="left" style="background-color: lightblue;">
<p>left</p>
</div>
<div class="center" style="background-color: pink;">
<p>center</p>
<p>center</p>
</div>
<div class="right" style="background-color: lightgreen;">
<p>right</p>
</div>
</div>
</body>
</html>?4、使用grid
<html>
<head>
<style>
body,p{margin: 0;}
.parent{
display: grid;
grid-auto-flow: column;
grid-gap:20px;
}
</style>
</head>
<body>
<div class="parent" style="background-color: lightgrey;">
<div class="left" style="background-color: lightblue;">
<p>left</p>
</div>
<div class="center" style="background-color: pink;">
<p>center</p>
<p>center</p>
</div>
<div class="right" style="background-color: lightgreen;">
<p>right</p>
</div>
</div>
</body>
</html>?推荐使用table和margin负边距，简单好用，不存在兼容性
gird，flex也很简单，但是兼容性不太好
本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-03-01 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读