欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 前端技术 > HTML >内容正文

HTML

前端知识-圣杯布局、双飞翼布局

发布时间：2024/1/18 HTML 44 豆豆
生活随笔 收集整理的这篇文章主要介绍了 前端知识-圣杯布局、双飞翼布局 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

圣杯布局

优点:

中间部分先加载，且中间自适应宽度，左右定宽。

实现方式:

  • main left right 设置float:left
  • left:margin-left:-100%;right:margin-left:-200px;
  • container padding: 0 200px;
  • left right 相对定位 分别向左 右 移动 -200px;
  • container: 设置min-width:400px 防止窗口过小，页面错位

实现效果

<!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>body,div{margin: 0;padding: 0;}.container{padding: 0 200px;min-width: 400px;}.container div{height: 200px;}.main{width: 100%;background-color: red;float: left;}.left,.right{position: relative;width: 200px;float: left;background-color: blue;}.left{margin-left: -100%;left: -200px;}.right{margin-left: -200px;right: -200px;}</style> </head> <body><div class="container"><div class="main">中</div><div class="left">左</div><div class="right">右</div></div> </body> </html>

双飞翼

实现方式

  • 为main内套一个div
  • 为main设置margin:0 200px
    优点: 无须使用圣杯中 为left right 设置相对定位 无须为container设置padding

    • 实现效果同上

    <!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>body,div{margin: 0;padding: 0;}.container{min-width: 400px;}.container div{height: 200px;}.main{width: 100%;background-color: red;float: left;}.main_w{margin: 0 200px;}.left,.right{width: 200px;float: left;background-color: blue;}.left{margin-left: -100%;}.right{margin-left: -200px;}</style> </head> <body><div class="container"><div class="main"><div class="main_w">中</div></div><div class="left">左</div><div class="right">右</div></div> </body> </html>

    绝对定位布局

    实现方式

  • 无须为left right设置浮动只需绝对定位 分别 left:0 right:0
  • container padding为0 20px
    • <!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>body,div{margin: 0;padding: 0;}.container{position: relative;padding: 0 200px;}.container div{height: 200px;}.main{width: 100%;background-color: red;float: left;}.left,.right{width: 200px;position: absolute;background-color: blue;top: 0;}.left{left: 0;}.right{right: 0;}</style> </head> <body><div class="container"><div class="main">中</div><div class="left">左</div><div class="right">右</div></div> </body> </html>

    总结

    以上是生活随笔为你收集整理的前端知识-圣杯布局、双飞翼布局的全部内容，希望文章能够帮你解决所遇到的问题。

    如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。