当前位置：首页 > news >正文

【Effective Web】常见的css布局方式--三栏布局

news 来源：原创 2024/9/29 21:33:53

常见的css居中方式–三栏布局

第一种实现：table布局（不推荐）

缺点：在table加载前，整个table都是空白的，且修改布局排版都十分困难

    <table class="container"><td class="left"></td><td class="middle"></td><td class="right"></td></table>
<style>.container {width: 500px;height: 100px;.left {width: 100px;height: 100px;background-color: red;}.middle {height: 100px;background-color: green;}.right {width: 100px;height: 100px;background-color: blue;}}
</style>

在这里插入图片描述

第二种实现：float

优点：实现简单，支持性好
缺点：由于float使得其他非float的元素围绕元素排列，要计算相应的margin

如果按正常排列，效果会是这样，middle块会尽可能占空间，导致right元素被挤压到下一行
在这里插入图片描述

需要把right块提前，同时把middle块加上margin: 0 110px (左右100px + 10px)

    <div class="container"><div class="left" style="float: left">left</div><div class="right" style="float: right">right</div><div class="middle" style="margin: 0 110px">middle</div></div>

在这里插入图片描述

第三种实现：table-cell

由于table有自适应的特点，可以把需要自适应的middle的display设置为table-cell。如果要根据窗口自适应，加上一个很大的width，这里设置为2000px

    <div class="container"><div class="left" style="float: left">left</div><div class="right" style="float: right">right</div><div class="middle" style="display: table-cell; width: 2000px;">middle</div></div>

第四种实现：flex（推荐）

    <div class="container" style="display: flex"><div class="left">left</div><div class="middle" style="flex-grow: 1">middle</div><div class="right">right</div></div>

第五种实现：grid

与flex布局类似，不过可以做二维的布局

    <div class="container" style="display: grid; grid-template-columns: 100px auto 100px"><div class="left">left</div><div class="middle">middle</div><div class="right">right</div></div>