<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多列布局等分布局</title>
<!-- 使用flex布局,但是兼容性不是很好 -->
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
width: 100%;
}
.parent{
width: 100%;
height: 100%;
display: flex;
background-color: aqua;
flex: 3;
}
.left{
flex: 1;
background-color: blue;
}
.center{
flex: 1;
background-color: red;
}
.right{
flex: 1;
background-color: yellow;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">
我在左侧
</div>
<div class="center">
我是居中
</div>
<div class="right">
我在右侧
</div>
</div>
</body>
</html>
