CSS经典布局~圣杯布局

男娘i 2022-05-19 02:38 394阅读 0赞

为了实现中间自适应，两边固定的最好解决方法,

话不多说，直接撸代码吧。

**HTML部分：**

<div class="wrap">  
        <div id="header"></div>  
          
        <div class="container">  
            <div class="middle">我是圣杯布局我是圣杯布局我是圣杯布局我是圣杯布局我是圣杯布局我是圣杯布局我是圣杯布局我是圣杯布局我是圣杯布局我是圣杯布局我是圣杯布局我是圣杯布局我是圣杯布局我是圣杯布局我是圣杯布局我是圣杯布局我是圣杯布局我是圣杯布局我是圣杯布局我是圣杯布局我是圣杯布局我是圣杯布局我是圣杯布局我是圣杯布局</div>  
            <div class="left">dddd</div>  
            <div class="right">ffff</div>  
        </div>

<div id="footer"></div>  
 </div>

**CSS部分：**

.wrap\{  
    width: 100%;  
    min-width: 700px;  
    height: 100%;  
\}

\#header,\#footer\{  
    width: 100%;  
    height: 30px;  
    line-height: 30px;  
    text-align: center;  
\}  
.left,.middle,.right\{  
    position: relative;  
    float: left;  
    min-height: 400px;  
\}  
.container\{  
    padding: 0 200px;  
    overflow: hidden;  
\}  
.left\{  
    width: 200px;  
    left: -200px;  
    margin-left: -100%;  
    background: yellow;  
\}  
.right\{  
    width: 200px;  
    right: -200px;  
    margin-left: -200px;  
    background: purple;  
\}  
.middle\{  
    width: 100%;  
    /\*word-break: break-all;\*/  //自动换行设置  
    background: orange;  
\}

**效果如图：**

![70][]

![70 1][]

![70 2][]

[70]: /images/20220519/5859f11f3bd04b18b797e896f4f9a25e.png
[70 1]: /images/20220519/e46e4b0e21794d589fde1b3d909beb84.png
[70 2]: /images/20220519/f37fce1b2d7a4f0988efaf0eb9ff7523.png

发表评论取消回复

表情：

评论列表（有 0 条评论，394人围观）

还没有评论，来说两句吧...

相关阅读

相关圣杯布局

<style> * { padding: 0; margin: 0; ...

逃离我推掉我的手/ 2024年04月19日 11:33/ 0 赞/ 197 阅读

相关 CSS面试题-圣杯布局

什么是圣杯布局圣杯布局：两侧栏的宽度固定，中间栏的宽度自适应。圣杯布局的特点中间部分在DOM结构上优先，以便先行渲染允许三列中的任意一列成为最

柔情只为你懂/ 2023年02月17日 12:28/ 0 赞/ 19 阅读

相关 css经典布局——圣杯布局和双飞翼布局的实现和理解

圣杯布局圣杯布局如图: ![在这里插入图片描述][20210513160112786.png] 而且要做到左右宽度固定，中间宽度自适应。 1. 利用flex

快来打我*/ 2023年01月20日 14:56/ 0 赞/ 284 阅读

相关 [CSS]flex布局的应用场景----圣杯布局

圣杯布局一、效果 ![圣杯布局][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9

冷不防/ 2022年11月26日 09:41/ 0 赞/ 387 阅读

相关 CSS圣杯布局实例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-eq

迈不过友情╰/ 2022年09月25日 06:22/ 0 赞/ 363 阅读

相关 css-圣杯布局和双飞翼布局

1.圣杯布局：（1）父元素中包含左中右三个盒子，并且让他们分别左浮动。（2）将中间的盒子宽度设为100%，并且它在html中代码位置放在左右代码位置的上面（就是所说的第

淩亂°似流年/ 2022年05月29日 12:35/ 0 赞/ 373 阅读

相关 CSS经典布局~圣杯布局

为了实现中间自适应，两边固定的最好解决方法, 话不多说，直接撸代码吧。 HTML部分： <div class="wrap"> <div id="hea

男娘i/ 2022年05月19日 02:38/ 0 赞/ 395 阅读

相关 CSS 圣杯布局

圣杯布局，不要被名字所迷惑只是一种简单的布局方式，也不知道从何时起，这种布局方式有了这么响亮的外号。 CSS+DIV 最常见的分栏布局就是浮动布局啦，以Bootstrap框架

川长思鸟来/ 2022年05月12日 13:58/ 0 赞/ 329 阅读

相关圣杯布局

.left{100px}.right{100px}.center{ calc(100% - 200px) } 圣杯布局复制代码转载于:h

布满荆棘的人生/ 2022年01月19日 03:05/ 0 赞/ 397 阅读

相关圣杯布局

圣杯布局要实现两边固定，中间自适应，中间部分的代码要放在最上面实现优先加载步骤第一步：创建middle，left，right，及包裹它们的父盒子cont

不念不忘少年蓝@/ 2021年08月29日 02:34/ 0 赞/ 561 阅读