css如何实现两列固定与一列自适应

2023-06-08 04:06:31 331人浏览泡泡鱼

摘要

这篇文章将为大家详细讲解有关CSS如何实现两列固定与一列自适应，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。1.flex布局Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型

这篇文章将为大家详细讲解有关CSS如何实现两列固定与一列自适应，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

1.flex布局

Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。我们说 flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。这里我们利用flex布局来实现两列固定一列自适应

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>     #main{         display: flex;         }    #left{         width:200px;        height:400px;         background:aqua;    }    #center{         flex-grow:1;           height:400px;           background:green;}    #right{         width:200px;        height:400px;          background:blue;        }    </style></head><body>    <div id="main">        <div id="left"></div>        <div id="center"></div>        <div id="right"></div>    </div></body></html>

2.使用浮动方法

对左右两部分分别使用float:left和float:right，float使左右两个元素脱离文档流，中间元素正常在正常文档流中。对中间文档流使用margin指定左右外边距进行定位。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>     *{margin: 0;padding: 0;}    #main{         width: 100%;height: 400px;         }    #left{         width:200px;        height:400px;        float: left;         background:aqua;    }    #center{         width: 100%;         height:400px;         margin: 0 200px;          background:green;}    #right{         width:200px;        height:400px;          float: right;        background:blue;        }    </style></head><body>    <div id="main">        <div id="left"></div>        <div id="right"></div>        <div id="center"></div>    </div></body></html>

3.使用浮动加calc函数

对三部分使用float:left，然后左右两边固定宽度，中间使用calc函数计算宽度。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>     *{margin: 0;padding: 0;}    #main{         width: 100%;height: 400px;         }    #left{         width:200px;        height:400px;        float: left;         background:aqua;    }    #center{         width: calc(100% - 400px);         height:400px;         float: left;          background:green;}    #right{         width:200px;        height:400px;          float:left;        background:blue;        }    </style></head><body>    <div id="main">        <div id="left"></div>        <div id="center"></div>        <div id="right"></div>    </div></body></html>

4.使用绝对定位

用绝对定位把左右两部分固定在两端，对中间文档流使用margin指定左右外边距进行定位。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>     *{margin: 0;padding: 0;}    #main{         width: 100%;         height: 400px;         position: relative;         }    #left{         width:200px;        height:400px;        position: absolute;        left: 0;        top: 0;        background:aqua;    }    #center{         width:100%;         height:400px;         margin: 0 200px;         background:green;}    #right{         width:200px;        height:400px;        position: absolute;        right: 0;        top: 0;        background:blue;        }    </style></head><body>    <div id="main">        <div id="left"></div>        <div id="center"></div>        <div id="right"></div>    </div></body></html>

效果图如下：

css如何实现两列固定与一列自适应