圣杯布局实现方式

最新推荐文章于 2022-12-29 23:46:40 发布

申申あ

最新推荐文章于 2022-12-29 23:46:40 发布

阅读量1.2k

点赞数 2

分类专栏：前端页面布局文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_43781887/article/details/125702855

版权

圣杯布局：左右两边固定，中间自适应的布局方式，效果图如下：

接下来主要介绍两种方法，第一种是采用绝对定位的方式，第二种方式是采用flex布局的方式。

（1）采用绝对定位方式实现圣杯布局，主要思路是左右两边的盒子采用绝对定位固定宽高，中间的盒子用margin-left和margin-right将盒子固定在中间：

<!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>Document</title>

    <style>
        .search {
            position: relative;
            width: 600px;
            height: 44px;
            margin: 100px auto;
            background-color: pink;
        }
        
        .search .searc

最低0.47元/天解锁文章

申申あ

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
圣杯布局实现方式

圣杯布局：左右两边固定，中间自适应的布局方式，效果图如下：接下来主要介绍两种方法，第一种是采用绝对定位的方式，第二种方式是采用flex布局的方式。（1）采用绝对定位方式实现圣杯布局，主要思路是左右两边的盒子采用绝对定位固定宽高，中间的盒子用margin-left和margin-right将盒子固定在中间：（2）采用flex布局实现圣杯布局，主要思路是左右两边的盒子固定高宽，中间的盒子采用flex:1占剩下的内容区域即可，代码如下：...
复制链接

扫一扫