三栏布局

第 26 / 154 卷日期：2024-02-01

display: inline-block;

width: 240px;

}

.right {

display: inline-block;

width: calc(100% - 240px);

}

//使用 calc() 函数计算 <div> 元素的宽度

grid

三栏布局

其中一列宽度自适应。

float布局

缺点：html结构不正确,当包含区域宽度小于左右框之和，右边框会被೿下来。float布局需要清除浮动，因为float 会脱离文档流，会造成高度塌陷的问题。

两边float+中间margin

两变固定，中间自适应中间元素margin值控制两边间距

宽度小于左右部分宽度之和时，右侧部分被೿下去

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

<style>

.left {

background-color: #a00;

}

.right {

float: right;

width: 300px;

background-color: #0aa;

}

.center {

margin: 0 300px;

background-color: #aa0;

overflow: auto;

}

</style>

<h1>我是浮动布局左框</h1>

</article>

<h1>我是浮动布局右框</h1>

</article>

<h1>我是浮动布局中间框</h1>

</section>

</body>

</html>

BFC布局

将main变成BFC，就不会和浮动元素发生重叠。

父元素设置overflow: hidden;

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

<style>

margin: 0;

padding: 0;

}

.left {

float: left;

background-color: red;

width: 100px;

height: 200px;

.right {

float: right;

background-color: blue;

width: 100px;

height: 200px;

}

.main{

background-color: green;

height: 200px;

overflow: hidden;

}

</style>

<div class="main">22111111jygjegrearewqrewqewgrhtyhyt</div>

</div>

</body>

</html>

table布局

优点:表格布局被称之为已经淘汰的布局，包括现在应该也很少有人使用，包括flex布局不兼容的情况下table 还可以尝试，类似这种三栏布局，table的实现也很简单，这个东⻄自我觉得看个人喜爱了，能满足日常使用

的话用用也未尝不可。

缺点:表格布局相当于其他布局，使用相对繁琐，代码量大，同时也存在缺陷，当单元格的一个格子超出高度

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

<style>

.table {

display: table;

width: 100%;

}

.table > article {

display: table-cell;

}

.left {

width: 300px;

background-color: #a00;

}

.center {

.right {

width: 300px;

background-color: #0aa;

}

</style>

<h1>我是表格布局左框</h1>

</article>

<h1>我是表格布局中间框</h1>

</article>

<h1>我是表格布局右框</h1>

</article>

</section>

</body>

</html>

flex弹性布局

利用flex布局，左右两栏设置固定大小，中间一栏设置为flex:1

<head>

<title>Title</title>

</head>

<body>

<style>

.flex {

display: flex;

}

.left {

width: 300px;

/flex-shrink: 0; ! 不缩小 !/

background-color: #a00;

}

.center {

/flex-grow: 1; ! 增大 !/

flex: 1;

background-color: #aa0;

}

width: 300px;

background-color: #0aa;

}

</style>

<h1>我是flex弹性布局左框</h1>

</article>

<h1>我是flex弹性布局中间框</h1>

</article>

<h1>我是flex弹性布局右框</h1>

</article>

</section>

</body>

</html>

grid栅格布局

优点:网格布局作为一个比较超前一点的布局自然有其独特的魅力，其布局方式布局思维都可以让你眼前一亮，有种新的思想。

缺点:兼容性

grid-template-columns 该属性是基于网格列的维度，去定义网格线的名称和网格轨道的尺寸大小。

用单位 fr 来定义网格轨道大小的弹性系数。每个定义了的网格轨道会按比例分配剩余的可用空间。当外层用一个

<head>

<title>Title</title>

</head>

<body>

<style>

.grid {

display: grid;

grid-template-columns: 300px 3fr 300px;

}

.grid .left {

background-color: #a00;

}

.grid .center {

background-color: #aa0;

}

.grid .right {

background-color: #0aa;

}

<h1>我是grid栅格布局左框</h1>

</article>

<h1>我是grid栅格布局中间框</h1>

</article>

<h1>我是grid栅格布局右框</h1>

</article>

</section>

</body>

</html>

圣杯布局

缺点：需要多加一层标签，html顺序不对，占用了布局框的margin属性。

圣杯布局的核心是左、中、右三栏都通过float进行浮动，然后通过负值margin进行调整。

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

padding-left: 100px;

padding-right: 100px;

}

.left {

float: left;

width: 100px;

height: 200px;

background-color: red;

margin-left: -100%;

position: relative;

left: -100px;

}

.right {

float: left;

width: 100px;

height: 200px;

background-color: yellow;

margin-left: -100px;

position: relative;

right: -100px;

}

float: left;

width: 100%;

height: 200px;

background-color: green;

}

</style>

<body>

<div class="main">发发发发发发返回和王企鹅王企鹅王企鹅而非</div>

</div>

</body>

</html>

双飞翼布局

双飞翼布局的前两步和圣杯布局一样，只是处理中间栏部分内容被遮挡问题的解决方案有所不同：

既然main部分的内容会被遮挡，那么就在main内部再加一个content，通过设置其margin来避开遮挡，问题也就可以解决了

双飞翼布局(两边 float+margin)，就是圣杯布局的改进方案。

<!DOCTYPE html>

<head>

float: left;

width: 100%;

}

.content {

height: 200px;

margin-left: 110px;

margin-right: 220px;

background-color: green;

}

/CSS伪元素::after用来创建一个伪元素，作为已选中元素的最后一个子元素。/

.main::after {

display: block;

content: '';

font-size: 0;

height: 0;

/唯一需要注意的是，需要在main后面加一个元素来清除浮动。/

clear: both;

zoom: 1;

}

.left {

float: left;

height: 200px;

width: 100px;

background-color: red;

}

.right {

width: 200px;

height: 200px;

float: left;

margin-left: -200px;

background-color: blue;

}

</style>

</head>

<body>

<div>

</div>

</div>

</body>

</html>

定位布局

优点：很快捷，设置很方便，而且也不容易出问题，你可以很快的就能想出这种布局方式。要求父级要有非static 定位，如果没有，左右框容易偏移出去

子绝父相，父元素设置为relative，左右两栏设置为absolute+中间一栏margin。

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

<style>

.tree-columns-layout {

position: relative;

}

.left {

position: absolute;

left: 0;

top: 0;

width: 300px;

background-color: #a00;

}

.right {

position: absolute;

top: 0;

width: 300px;

background-color: #0aa;

}

.center {

margin: 0 300px;

background-color: #aa0;

overflow: auto;

}

</style>

<h1>我是浮动定位左框</h1>

</article>

<h1>我是浮动定位中间框</h1>

</article>

<h1>我是浮动定位右框</h1>

</article>

</section>

绝对定位

三栏均设置为absolute+left+right。

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<style>

{

margin: 0;

padding: 0;

}

.middle {

position: absolute;

left: 200px;

right: 200px;

height: 300px;

background-color: yellow;

}

.left {

position: absolute;

width: 200px;

height: 300px;

background-color: red;

}

.right {

position: absolute;

right: 0px;

width: 200px;

background-color: green;

height: 300px;

}

</style>

<body>

</div>

</div>

</body>

全站分卷索引 · 154 卷