一、题目
根据题目给出你的答案。
(左栏宽度固定,右栏自适应)
题目:已知高度100px,左宽度固定150px,右宽度自适应。
二、我的代码详情
https://codepen.io/janmie-cjm/pen/ExKpVdO
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=">
<title>页面布局-两栏布局1</title>
<style>
html *{
margin: 0;
padding: 0;
}
section {
margin-bottom: 10px;
}
</style>
</head>
<body>
<!-- 已知高度100px,左宽度固定150px,右宽度自适应 -->
<!-- 1-float -->
<section>
<style>
#wrapper1 {
height: 100px;
width: 100%;
background: #fffe9f;
}
.left1 {
width: 150px;
height: 100%;
background: #cff;
float: left;
}
.right1 {
background: #fcc;
height: 100%;
overflow: auto;
}
</style>
<article id="wrapper1">
<div class="left1">左侧</div>
<div class="right1">
<h3>1-float</h3>
<p>右侧</p>
<p>右侧</p>
<p>右侧</p>
<p>右侧</p>
<p>右侧</p>
</div>
</article>
</section>
<!-- 2-绝对定位 -->
<section>
<style>
#wrapper2 {
height: 100px;
width: 100%;
background: #fffe9f;
position: relative;
}
.left2 {
width: 150px;
height: 100%;
background: #cff;
position: absolute;
left: 0;
}
.right2 {
background: #fcc;
height: 100%;
width: 100%;
position: absolute;
left: 150px;
}
</style>
<article id="wrapper2">
<div class="left2">左侧</div>
<div class="right2">
<h3>2-绝对定位</h3>
<p>右侧</p>
<p>右侧</p>
<p>右侧</p>
<p>右侧</p>
<p>右侧</p>
</div>
</article>
</section>
<!-- 3-flex -->
<section>
<style>
#wrapper3 {
height: 100px;
width: 100%;
background: #fffe9f;
display: flex;
}
.left3 {
width: 150px;
height: 100%;
background: #cff;
}
.right3 {
background: #fcc;
height: 100%;
flex: 1;
}
</style>
<article id="wrapper3">
<div class="left3">左侧</div>
<div class="right3">
<h3>3-flex</h3>
<p>右侧</p>
<p>右侧</p>
<p>右侧</p>
<p>右侧</p>
<p>右侧</p>
</div>
</article>
</section>
<!-- 4-table -->
<section>
<style>
#wrapper4 {
height: 100px;
width: 100%;
background: #fffe9f;
display: table;
}
#wrapper4 div {
display: table-cell;
}
.left4 {
width: 150px;
height: 100%;
background: #cff;
}
.right4 {
background: #fcc;
height: 100%;
}
</style>
<article id="wrapper4">
<div class="left4">左侧</div>
<div class="right4">
<h3>4-table</h3>
<p>右侧</p>
<p>右侧</p>
<p>右侧</p>
<p>右侧</p>
<p>右侧</p>
</div>
</article>
</section>
<!-- 5-grid -->
<section>
<style>
#wrapper5 {
width: 100%;
background: #fffe9f;
display: grid;
grid-template-rows: 100px;
grid-template-columns: 150px auto;
}
.left5 {
height: 100%;
background: #cff;
}
.right5 {
background: #fcc;
height: 100%;
}
</style>
<article id="wrapper5">
<div class="left5">左侧</div>
<div class="right5">
<h3>5-grid</h3>
<p>右侧</p>
<p>右侧</p>
<p>右侧</p>
<p>右侧</p>
<p>右侧</p>
</div>
</article>
</section>
</body>
</html>
三、总结
-
本题目的解决方案有哪些?
浮动 / 绝对定位 / flexbox / 表格布局 / 网格布局 ; -
各方案优缺点?
1)浮动
优:简单
缺:脱离文档流,需结合BFC应用
2)绝对定位
优:简单
缺:脱离文档流,需结合BFC应用,代码较多
3)flexbox
优:简单快捷,兼容性好
4)表格布局
优:兼容性较好
缺:每一列高度会同时变化;表格需先渲染,延迟页面生成速度
5)网格布局
优:可实现多行多列的二维复杂操作,兼容性较好,简化代码 -
兼容性好的方案有?
flexbox、网格布局
*代码尚存在很多不足,望提出不同的意见,互相交流。*