一、左右浮动
注意
:两个浮动的标签要写在一起。
示例:
<style>
/*左右浮动*/
* {
margin: 0;
padding: 0;
}
.left{
float: left;
width: 200px;
height: 100vh;
background-color: gold;
}
.center{
height: 100vh;
background-color: aquamarine;
}
.right{
float: right;
width: 200px;
height: 100vh;
background-color: blueviolet;
}
</style>
<body>
<div class="left">我是左边的</div>
<div class="center">我是中间的</div>
<div class="right">我是右边的</div>
</body>
二、flex布局
<style>
/* 弹性布局实现 */
* {
margin: 0;
padding: 0;
}
header {
display: flex;
}
.left{
width: 200px;
height: 100vh;
background-color: aquamarine;
}
.center{
flex-grow: 1;
height: 100vh;
background-color: aqua;
}
.right{
width: 200px;
height: 100vh;
background-color: aquamarine;
}
</style>
<body>
<div class="left">我是左边的</div>
<div class="center">我是中间的</div>
<div class="right">我是右边的</div>
</body>
三、父相子绝
<style>
/* 定位 */
<style>
* {
margin: 0;
padding: 0;
}
header {
position: relative;
}
.left{
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 100vh;
background-color: aquamarine;
}
.center{
margin-left: 200px;
float: left;
width: calc(100% - 400px);
height: 100vh;
background-color: aqua;
}
.right{
position: absolute;
top: 0;
right: 0;
float: left;
width: 200px;
height: 100vh;
background-color: aquamarine;
}
</style>
<body>
<div class="left">我是左边的</div>
<div class="center">我是中间的</div>
<div class="right">我是右边的</div>
</body>
总结
以上就是今天要讲的内容。