题目:假设高度已知,请写出三栏布局其中左右各300,中间自适应
这里有5种方法:浮动/弹性盒子/定位/表格布局/网格布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Layout</title>
<!-- 页面布局:Layout -->
<style>
* {
margin: 0;
padding: 0;
}
.layout article div {
height: 100px;
}
.layout .layout-left-center-right .left {
width: 300px;
float: left;
background-color: coral;
}
.layout .layout-left-center-right .right {
width: 300px;
float: right;
background-color: yellow;
}
.layout .layout-left-center-right .center {
background-color: red;
text-align: center;
}
/* ----------------------------------------------------------------------------------------------- */
.grad {
height: 100px;
width: 100%;
display: flex;
margin-top: 20px;
}
.left {
width: 300px;
background-color: red;
}
.right {
width: 300px;
background-color: yellowgreen;
}
.center {
background-color: yellow;
text-align: center;
flex: 1;
}
/* 定位解决====================================================================================================================== */
.layout_position article div {
height: 100px;
margin-top: 20px;
position: absolute;
}
.layout_position-left-center-right .left {
width: 300px;
left: 0px;
background-color: burlywood;
}
.layout_position-left-center-right .right {
width: 300px;
right: 0px;
background-color: black;
}
.layout_position-left-center-right .center {
left: 300px;
right: 300px;
background-color: firebrick;
}
/* ============================================================================================================ */
.table_t {
height: 100px;
width: 100%;
display: table;
margin-top: 150px;
}
.table_t div {
display: table-cell;
}
.table_t .left {
width: 300px;
background-color: blanchedalmond;
}
.table_t .right {
width: 300px;
background-color: firebrick;
}
.table_t .center {
background-color: yellow;
}
/* ================================================================================================================================================== */
.grid .grid_g {
margin-top: 20px;
display: grid;
width: 100%;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
.grid_g .left {
background-color: yellow;
}
.grid_g .center {
background-color: green;
}
.grid_g .right {
background-color: gold;
}
</style>
</head>
<body>
<section class="layout">
<article class="layout-left-center-right">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h2>浮动布局</h2>
</div>
</article>
</section>
<!-- ......................................................................................................................... -->
<div class="grad">
<div class="left"></div>
<div class="center">
<h2>flexbox布局</h2>
</div>
<div class="right"></div>
</div>
<!-- ============================================================================================================================== -->
<section class="layout_position">
<article class="layout_position-left-center-right">
<div class="left"></div>
<div class="center">
<h2>绝对定位布局</h2>
</div>
<div class="right"></div>
</article>
</section>
<!-- ========================================================================================================================= -->
<section class="table">
<article class="table_t">
<div class="left"></div>
<div class="center">
<h2>表格布局解决方案</h2>
</div>
<div class="right"></div>
</article>
</section>
<!-- ========================================================================================================================= -->
<section class="grid">
<article class="grid_g">
<div class="left"></div>
<div class="center">
<h2>网格布局解决方案</h2>
</div>
<div class="right"></div>
</article>
</section>
</body>
</html>
效果: