共计 2733 个字符，预计需要花费 7 分钟才能阅读完成。
承接上文思考 2
- flex 布局，table 布局，grid 布局可以实现高度不定，左右自适应中间高度
- float 布局 overflow:hidden 可以使中间内容垂直排布，不能左右自适应；
- 绝对定位布局只能指定固定高度，不能左右自适应；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>css 布局 </title>
<style>
html * {
margin: 0;
padding: 0;
}
section {
margin-bottom: 20px;
margin-top: 20px;
}
.left {background-color: aqua;}
.mid {background-color: burlywood;}
.right {background-color: coral;}
ul li {list-style: none;}
</style>
</head>
<body>
<p>
题目：假设高度不定，请写出三栏布局，其中左栏右栏会根据中间内容撑开，中间自适应。</p>
<!-- flex 布局 -->
<section class="flex">
<style>
.flex article {display: flex;}
.flex-left {width: 100px;}
.flex-right {width: 100px;}
.flex-mid {flex: 1;}
</style>
<article>
<div class="left flex-left"></div>
<div class="mid flex-mid">
我是用的 flexbox
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
<div class="right flex-right"></div>
</article>
</section>
<!-- table 布局 -->
<section class="table">
<style>
.table article {
display: table;
width: 100%;
}
.table-left {
display: table-cell;
width: 100px;
}
.table-right {
display: table-cell;
width: 100px;
}
.table-mid {display: table-cell;}
</style>
<article>
<div class="left table-left"></div>
<div class="mid table-mid">
我是用的表格布局
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
<div class="right table-right"></div>
</article>
</section>
<!-- 网格布局 -->
<section class="grid">
<style>
.grid article {
display: grid;
width: 100%;
grid-template-columns: 100px auto 100px;
}
</style>
<article>
<div class="left grid-left"></div>
<div class="mid grid-mid">
我是用的网格布局
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
<div class="right grid-right"></div>
</article>
</section>
<!-- 浮动布局 -->
<section class="float">
<style>
.float {overflow: hidden;}
.float-left {
float: left;
width: 100px;
min-height: 100px;
}
.float-right {
float: right;
width: 100px;
min-height: 100px;
}
.float-mid {overflow: hidden;}
</style>
<article>
<div class="left float-left"></div>
<div class="right float-right"></div>
<div class="mid float-mid">
我是用的浮动
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
</article>
</section>
<!-- 绝对定位 -->
<section class="position">
<style>
.position article {position: relative;}
.position-left {
position: absolute;
left: 0;
width: 100px;
height: 100px;
}
.position-right {
position: absolute;
right: 0;
width: 100px;
height: 100px;
}
.position-mid {
position: absolute;
left: 100px;
right: 100px;
}
</style>
<article>
<div class="left position-left"></div>
<div class="right position-right"></div>
<div class="mid position-mid">
我是用的绝对定位
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
</article>
</section>
思考：</body>
</html>
效果预览：
正文完
