首页 > 其他 > 详细

圣杯布局

时间:2020-09-10 12:50:31      阅读:74      评论:0      收藏:0      [点我收藏+]

圣杯布局也叫双飞翼布局,就是两边定宽,中间自适应的三栏布局,中间栏要放在文档流前面以优先渲染。

直接上代码

html结构

<div class="content">
        <div class="left">
            左侧固定
        </div>
        <div class="center">
            中间自适应
        </div>
        <div class="right">
            右侧固定
        </div>
</div>

 

css样式

<style>
  .content {
        padding: 0 200px;
        height: 200px;
        min-width: 200px;
  }
  .left {
        width: 200px;
        height: 200px;
        background: red;
        float: left;
        margin-left: -200px;
   }
  .right {
        width: 200px;
        height: 200px;
        background: yellow;
        float: right;
        margin-right: -200px;
   }
  .center {
        width: 100%;
        min-width: 200px;
        height: 200px;
        background: green;
        float: left;
   }
</style>

技术分享图片

 

圣杯布局

原文:https://www.cnblogs.com/ranyihang/p/13644336.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!