第18题 CSS如何进行圣杯布局
目录
圣杯布局如图:
而且要做到左右宽度固定,中间宽度自适应。
首先我们把公共的 HTML 和 CSS 代码附上,以下方法中都可使用,不做重复工作。
公共 HTML 代码:
<body> <div class="header">这里是头部</div> <div class="container"> <div class="left">左边</div> <div class="middle">中间部分</div> <div class="right">右边</div> </div> <div class="footer">这里是底部</div> </body>
公共 CSS 代码:
*{ margin: 0; padding: 0; } .header,.footer{ height:40px; width:100%; background:red; }
1. 利用 flex 布局
CSS 代码:
.container{ display: flex; } .middle{ flex: 1; background:yellow; } .left{ width:200px; background:pink; } .right{ background: aqua; width:300px; }
2.绝对定位
.container{ min-height: 1.2em; position: relative; } .container>div { position: absolute; } .middle { left: 200px; right: 250px; background: yellow; } .left { left: 0; width: 200px; background: pink; } .right { right: 0; width: 250px; background: aqua; }
3. grid 布局
HTML 代码:
<div id="header">header</div> <div id="left">left</div> <div id="middle">middle</div> <div id="right">right</div> <div id="footer">footer</div>
CSS 代码:
body{ display: grid; } #header{ background: red; grid-row:1; grid-column:1/5; } #left{ grid-row:2; grid-column:1/2; background: orange; } #right{ grid-row:2; grid-column:4/5; background: cadetblue; } #middle{ grid-row:2; grid-column:2/4; background: rebeccapurple } #footer{ background: gold; grid-row:3; grid-column:1/5; }
看看 grid 布局,其实也挺简单的吧,里面的参数应该不言而喻了。另外我之前也写过一篇关于 grid 布局文章:CSS Grid 网格布局实例教程,感兴趣的小伙伴可以看一下。
另外说一点,到 2019 年为止,grid 现在绝大多数浏览器已经可以兼容了,可以着手使用了。
当然,还有 table 布局,年代比较久远了,而且对 SEO 不友好,知道就可以,这里就不浪费篇幅了。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 第18题 CSS如何进行圣杯布局
码云笔记 » 第18题 CSS如何进行圣杯布局