当前位置：网站首页>三栏布局：左右固定宽，中间自适应的几种方式

三栏布局：左右固定宽，中间自适应的几种方式

2022-08-09 15:03:00 【不知-_】

要求

三个div占满一行，左右两个div宽为100px，中间的div自适应宽度，时刻保持三个div占满一行

实现方法

1. 浮动 float

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>两边宽度固定，中间自适应</title>
    <style> body{
       padding: 0; margin: 0; } .left{
       width: 100px; height: 100px; float: left; background-color: orange; } .right{
       width: 100px; height: 100px; float: right; background-color:pink; } .center{
       background-color: blue; height: 100px; } .clearfixed::after{
       content: ""; display: both; clear: both; height: 0; visibility: hidden; } </style>
</head>

<body>
    <div class="box clearfixed">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
    </div>
    
</body>
</html>

效果：
在这里插入图片描述

注意点

一定要注意三个div的顺序，center必须放在最后。
如果三个div按照“left, center, right"的顺序放，按照HTML在页面展示的顺序，先有left占据了200px；然后是center，center未设置宽度，但其父div是100%，所以，center占据剩余的全部空间；最后渲染right，由于left和center所在的行空间没有多余的空间了，所以right会被挤下去。
如下图：
注意清除浮动，否则会影响页面其他的结构。

定位position

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>两边宽度固定，中间自适应</title>
    <style> body{
       padding: 0; margin: 0; } .box{
       position: relative; } .left{
       width: 100px; height: 100px; position: absolute; left: 0; background-color: orange; } .center{
       height: 100px; position: absolute; left: 100px; right: 100px; background-color: blue; } .right{
       width: 100px; height: 100px; position: absolute; right: 0; background-color:pink; } </style>
</head>

<body>
    <div class="box">
        <div class="left">我是左边</div>
        <div class="center">中间自适应部分</div>
        <div class="right">我是右边</div>
    </div>
    
</body>
</html>

效果：
在这里插入图片描述

注意点

该方法元素脱离文档流，实际应用时需要注意。

3. 弹性盒子布局 flex

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>两边宽度固定，中间自适应</title>
    <style> body{
       padding: 0; margin: 0; } .box{
       display: flex; } .left{
       width: 100px; height: 100px; background-color: orange; } .center{
       height: 100px; flex: 1; background-color: blue; } .right{
       width: 100px; height: 100px; background-color:pink; } </style>
</head>

<body>
    <div class="box">
        <div class="left">我是左边</div>
        <div class="center">中间自适应部分</div>
        <div class="right">我是右边</div>
    </div>
    
</body>
</html>

效果：
在这里插入图片描述

注意点

不兼容ie8以下版本，若不考虑该情况，flex是不错的选择。

4. 表格布局 table-cell

了解了一下table-cell布局，觉得不咋合适就不记录了。

table-cell布局简介：
display: table-cell;会使元素表现的类似一个表格中的单元格td，利用这个特性可以实现文字的垂直居中效果。
但同时它也会破坏一些CSS属性，table-cell最好不要与float以及position: absolute同时使用。
设置了table-cell的元素对高度和宽度高度敏感，对margin值无反应，可以响应padding的设置，表现几乎类似一个td元素。