美文网首页我爱编程
实现两边定宽,中间自适应

实现两边定宽,中间自适应

作者: lvyweb | 来源:发表于2018-06-21 10:17 被阅读47次

标签(空格分隔): css


圣杯布局和双飞翼布局、flex布局

定义

圣杯布局(双飞翼布局):两边定宽,中间宽度自适应;且优先渲染中间主题内容部分

区别:圣杯布局和双飞翼布局基本上是一致的,都是两边固定宽度,中间自适应的三栏布局,其中,中间栏放到文档流前面,保证先行渲染。解决方案大体相同,都是三栏全部float:left浮动,区别在于解决中间栏div的内容不被遮挡上,圣杯布局是中间栏在添加相对定位,并配合left和right属性,效果上表现为三栏是单独分开的(如果可以看到空隙的话),而双飞翼布局是在中间栏的div中嵌套一个div,内容写在嵌套的div里,然后对嵌套的div设置margin-left和margin-right,效果上表现为左右两栏在中间栏的上面,中间栏还是100%宽度,只不过中间栏的内容通过margin的值显示在中间。

1、圣杯布局

DOM结构:
由于需要优先渲染主题内容部分,因此在DOM结构中需要将其写在左右侧边栏之前。

 <body>
    <div id="hd">header</div>
    <div id="bd">
      <div id="middle">middle</div>
      <div id="left">left</div>
      <div id="right">right</div>
    </div>
    <div id="footer">footer</div>
</body>
    

CSS:

<style>
#hd{
    height:50px;
    background: #666;
    text-align: center;
}
#bd{
    /*左右栏通过添加负的margin放到正确的位置了,此段代码是为了摆正中间栏的位置*/
    padding:0 200px 0 180px;
    height:100px;
}
#middle{
    float:left;
    width:100%;/*左栏上去到第一行*/
    height:100px;
    background:blue;
}
#left{
    float:left;
    width:180px;
    height:100px;
    margin-left:-100%;
    background:#0c9;
    /*中间栏的位置摆正之后,左栏的位置也相应右移,通过相对定位的left恢复到正确位置*/
    position:relative;
    left:-180px;
}
#right{
    float:left;
    width:200px;
    height:100px;
    margin-left:-200px;
    background:#0c9;
    /*中间栏的位置摆正之后,右栏的位置也相应左移,通过相对定位的right恢复到正确位置*/
    position:relative;
    right:-200px;
}
#footer{
    height:50px;
    background: #666;
    text-align: center;
}
</style>    

全部代码:

<!DOCTYPE html>
<meta charset=utf-8>
<html>
<head>
    <title>圣杯布局</title>
    <style type="text/css">
        #hd{
            height:50px;
            background: #666;
            text-align: center;
        }
        #bd{
            /*左右栏通过添加负的margin放到正确的位置了,此段代码是为了摆正中间栏的位置*/
            padding:0 200px 0 180px;
            height:100px;
        }
        #middle{
            float:left;
            width:100%;/*左栏上去到第一行*/
            height:100px;
            background:blue;
        }
        #left{
            float:left;
            width:180px;
            height:100px;
            margin-left:-100%;
            background:#0c9;
            /*中间栏的位置摆正之后,左栏的位置也相应右移,通过相对定位的left恢复到正确位置*/
            position:relative;
            left:-180px;
        }
        #right{
            float:left;
            width:200px;
            height:100px;
            margin-left:-200px;
            background:#0c9;
            /*中间栏的位置摆正之后,右栏的位置也相应左移,通过相对定位的right恢复到正确位置*/
            position:relative;
            right:-200px;
        }
        #footer{
            height:50px;
            background: #666;
            text-align: center;
        }
            </style>
</head>
<body>

   <div id="bd">
        <div id="middle">middle</div>
        <div id="left">left</div>
        <div id="right">right</div>
    </div>

</body>
</html>

2、双飞翼布局

DOM结构

<body>
<div id="hd">header</div> 
  <div id="middle">
    <div id="inside">middle</div>
  </div>
  <div id="left">left</div>
  <div id="right">right</div>
  <div id="footer">footer</div>
</body>

双飞翼布局是在middle的div里又插入一个div,通过调整内部div的margin值,实现中间栏自适应,内容写到内部div中。

CSS

<style>
#hd{
    height:50px;
    background: #666;
    text-align: center;
}
#middle{
    float:left;
    width:100%;/*左栏上去到第一行*/     
    height:100px;
    background:blue;
}
#left{
    float:left;
    width:180px;
    height:100px;
    margin-left:-100%;
    background:#0c9;
}
#right{
    float:left;
    width:200px;
    height:100px;
    margin-left:-200px;
    background:#0c9;
}

/*给内部div添加margin,把内容放到中间栏,其实整个背景还是100%*/ 
#inside{
    margin:0 200px 0 180px;
    height:100px;
}
#footer{  
   clear:both; /*记得清楚浮动*/  
   height:50px;     
   background: #666;    
   text-align: center; 
} 
</style>

全部代码

<!DOCTYPE html>
<meta charset=utf-8>
<html>
<head>
    <title>双飞翼</title>
    <style>
#hd{
    height:50px;
    background: #666;
    text-align: center;
}
#middle{
    float:left;
    width:100%;/*左栏上去到第一行*/     
    height:100px;
    background:blue;
}
#left{
    float:left;
    width:180px;
    height:100px;
    margin-left:-100%;
    background:#0c9;
}
#right{
    float:left;
    width:200px;
    height:100px;
    margin-left:-200px;
    background:#0c9;
}

/*给内部div添加margin,把内容放到中间栏,其实整个背景还是100%*/ 
#inside{
    margin:0 200px 0 180px;
    height:100px;
}
#footer{  
   clear:both; /*记得清楚浮动*/  
   height:50px;     
   background: #666;    
   text-align: center; 
} 
</style>
</head>
<body>
<div id="hd">header</div> 
  <div id="middle">
    <div id="inside">middle</div>
  </div>
  <div id="left">left</div>
  <div id="right">right</div>
  <div id="footer">footer</div>
</body>
</html>

3、弹性盒模型法

整个页面布局由两个弹性盒模型构成:

  1. body作为盒子,header、main、footer按垂直方向排列,上下设置定高之后中间设置flex=1自动填满剩余高度。
  2. main作为盒子,left、middle、right按水平方向排列(默认),左右设置定宽后中间设置flex=1自动填满剩余宽度。
  3. 设置order=-1将左侧边栏拉到主体内容之前。
<!DOCTYPE html>
<meta charset=utf-8>
<html>
<head>
    <title>弹性盒模型法</title>
    <style type="text/css">
        body {
            display: flex;
            min-height: 100vh;
            flex-direction: column;
        }
        main {
            display: flex;
            flex: 1;
        }
        .middle {
            flex: 1;
            background-color: skyblue;
        }
        .left,
        .right {
            flex-basis: 200px;
            background-color: pink;
        }
        .left {
            order: -1;
        }

    </style>
</head>
<body>

    <main>
        <div class="middle">middle</div>
        <aside class="left">left</aside>
        <aside class="right">right</aside>
    </main>

</body>
</html>

相关文章

  • CSS面试常问的题型

    左边定宽,右边自适应方案: 左右两边定宽,中间自适应 左右居中 行内元素:text-align:center 定宽...

  • 实现两边定宽,中间自适应

    标签(空格分隔): css 圣杯布局和双飞翼布局、flex布局 定义 圣杯布局(双飞翼布局):两边定宽,中间宽度自...

  • CSS布局相关

    CSS相关 1.左边定宽,右边自适应方案: 2.左右两边定宽,中间自适应 3.CSS左右垂直居中 设置paddin...

  • 中间定宽,两边自适应布局的三种实现方法

    1. 中间定宽,两边自适应布局的三种实现方法 浮动加定位 calc计算法 弹性盒子法

  • CSS三列布局(两边定宽中间自适应)

    html flex(两边定宽,中间自适应) float+position(圣杯布局) 原理:1.容器加paddin...

  • CSS:三栏布局

    -三列布局,中间宽度自适应,两边定宽; -中间栏要在浏览器中优先展示渲染; -允许任意列的高度最高; 1. 绝对定...

  • 圣杯布局和双飞翼布局的区别与实现

    前言 开门见山,圣杯布局和双飞翼布局都是为了实现两边定宽,中间自适应的布局,只是在实现的方法上有些许不同,因此不要...

  • 三栏布局:圣杯、双飞翼、flex、栅格

    --- 布局:圣杯、双飞翼、flex布局 三列布局,中间宽度自适应,两边定宽; 中间栏要在浏览器中优先展示渲染; ...

  • jichu

    1.左右布局,左边定宽,右边自适应,不少于三种方式 2.左右定宽,中间自适应 3.页面进度条如何实现 页面进度条是...

  • CSS布局

    一列布局 一列水平居中 一列垂直居中 两列布局 左定宽右自适应 左自适应右定宽 三列布局 左右定宽中间自适应 左右...

网友评论

    本文标题:实现两边定宽,中间自适应

    本文链接:https://www.haomeiwen.com/subject/umcqyftx.html