精华内容
下载资源
问答
  • 1、绝对定位法(最易理解)左右两栏采用绝对定位,分别...于是实现了三栏自适应布局。 1 html,body{margin:0; height:100%;} 2 #left,#right{position:absolute; top:0; width:200px; height:100%;} 3 #left...

    1、绝对定位法(最易理解)
    左右两栏采用绝对定位,分别固定于页面的左右两侧,中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。

    1     html,body{margin:0; height:100%;}
    2     #left,#right{position:absolute; top:0; width:200px; height:100%;}
    3     #left{left:0; background:#a0b3d6;}
    4     #right{right:0; background:#a0b3d6;}
    5     #main{margin:0 210px; background:#ffe6b8; height:100%;}
    1 <div id="left">1</div>
    2  <div id="main">2</div>
    3  <div id="right">3</div>

    2、margin负值法(不易理解)

    1 html,body{margin:0; height:100%;}
    2 #main{width:100%; height:100%; float:left;}
    3 #main #body{margin:0 210px; background:#ffe6b8; height:100%;}
    4 #left,#right{width:200px; height:100%; float:left; background:#a0b3d6;}
    5 #left{margin-left:-100%;}
    6 #right{margin-left:-200px;}

    重点是第一个div是中间的main,且必须套一个容器。

     

    3、浮动法(最常见)

    1 html,body{margin:0; height:100%;}
    2 #main{height:100%; margin:0 210px; background:#ffe6b8;}
    3 #left,#right{width:200px; height:100%; background:#a0b3d6;}
    4 #left{float:left;}
    5 #right{float:right;}

     

     

    转载于:https://www.cnblogs.com/yiliweichinasoft/p/4064225.html

    展开全文
  • 目前为止,我所熟知左中右三栏宽度自适应于浏览器方法有三个:绝对定位法,margin负值法以及自身浮动法。这些方法简洁实用,且无兼容性问题。 一、绝对定位法:左右两栏采用绝对定位,分别固定于页面...

    目前为止,我所熟知的左中右三栏宽度自适应于浏览器的方法有三个:绝对定位法margin负值法以及自身浮动法。这些方法简洁实用,且无兼容性问题。

     


     

    一、绝对定位法:左右两栏采用绝对定位,分别固定于页面的左右两侧,中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。

    首先需要三个div,将左右两边的div的position设置为absolute,左右设置为相等固定宽度,在这里设置为200px,并且左边div的top值为0,left值为0,同理右边top值为0,right值为0。然后设置中间div的样式,将中间div的margin-left和margin-right设置为左右两边的固定宽200px。以下是简单的布局:

     

     

    <body>
        <div id="main"></div>
        <div id="left"></div>
        <div id="right"></div>
    </body>

     

    下面就是关键的css代码:

     

    <style type="text/css"> 
        #main {margin:0 200px;background:red;}
        #left{position:absolute;top:0;left:0;width:200px;background:blue;height:100%;} 
    #right{position:absolute;top:0;right:0;width:200px;background:green;height:100%;}
    </style>

    这种方式三个div的顺序可以任意改变。

    此方法的优点在于:理解容易,上手简单,受内部元素影响而破坏布局的概率低,就是比较经得起折腾。
    缺点在于:如果中间栏含有最小宽度限制,或是含有宽度的内部元素,当浏览器宽度小到一定程度,会发生层重叠的情况。


     

    二、自身浮动法:左栏左浮动,右栏右浮动,中间栏放最后。

    以下是布局代码:

    <body>
        <div id="left"></div>
        <div id="right"></div>
        <div id="main"></div>
    </body> 

    下面是css样式代码:

     

    <style type="text/css"> 
        #main {margin:0 200px;background:red;} 
        #left{float:left;width:200px;background:blue;height:100%;} 
        #right{float:right;width:200px;background:green;height:100%;}
    </style> 

    这种方式需要注意三个div的顺序,左右两栏的顺序不分先后,但是中间一栏必须放在最后。

    此方法的优点是:代码足够简洁与高效
    缺点是:中间主体存在克星,clear:both属性。如果要使用此方法,需避免明显的clear样式。  


     

    三、margin负值法:左右两栏均左浮动,左右两栏采用负的margin值。中间栏被宽度为100%的浮动元素包起来。

    下面是布局代码:

    <body>
       <div id="main">
           <div class="content"></div>
       </div>
       <div id="left"></div>
       <div id="right"></div>
    </body>  

    下面是css样式代码:

    <style type="text/css">
       #main {float:left;width:100%;}
       .content {margin:0 200px;height:100%;background:red;}
       #left{float:left;width:200px;margin-left:-100%;background:blue;}
       #right{float:left;width:200px;margin-left:-200px;background:green;}
    </style>

    左右两栏div的顺序不分先后,但是主体部分div要放前面。

    此方法的优点在于:三栏相互关联,可谓真正意义上的自适应,有一定的抗性——布局不易受内部影响。
    缺点在于:相对比较难理解些,上手不容易,代码相对复杂。出现百分比宽度,过多的负值定位,如果出现布局的bug,排查不易。

     

    转载于:https://www.cnblogs.com/guoqing26/p/5313481.html

    展开全文
  • 在css中实现三栏布局,是一道常见面试题,要学会用多种方式来实现自适应布局,在假设高度已知情况下,本文一共用五种方式来实现了自适应三栏布局。 目录 1.浮动布局 2. position 布局 3. flex 布局 4. ...

    在css中实现三栏布局,是一道常见的面试题,要学会用多种方式来实现自适应布局,在假设高度已知的情况下,本文一共用五种方式来实现了自适应三栏布局。

    目录

    1.浮动布局

    2. position 布局

    3. flex 布局

    4. table 布局

    5.网格布局


    1.浮动布局

    使用浮动布局的技巧就是,给左右两个div设置定宽,分别设置浮动,中间的div不用设置宽度,这样的做法就是需要将中间的div写在最后,要不然后面的div会下沉。 

     如果去掉高度已知的条件 , flex table 布局左右两边可以自动撑开

      浮动布局的优点是 兼容性好,缺点是脱离文档流,要处理清除浮动的问题

    ​
     <div class="sub">
            <div class="layout left"></div>
            <div class="layout right"></div>
            <div class="layout  center">
                1.这是三栏布局的中间部分
                </div>
        </div> 
        <style>
            .sub .layout{
                height:100px;
            }
            .sub .left{
                width: 300px;
                background-color: blue;
                float: left;
            }
            .sub .right{
                width: 300px;
                background-color: red;
                float: right;
            }
            .sub .center{
                background-color: silver;
            }
    
    ​

    2. position 布局

      通过对父元素设置position : relative,给子元素设置position: absolute ,要给最后一个div设置top:0,要不然会下沉。

      优势是快捷,缺点是脱离文档流,子元素也要脱离文档流,可用性差。

    <div class="sub">
            <div class="layout left"></div>
            <div class="layout  center">
                1.这是三栏布局的中间部分
                </div>
            <div class="layout right"></div>
            
        </div> 
        <style>
            *{
               margin: 0;
               padding: 0;
            }
            .sub .layout{
                height:100px;
                position: relative;
            }
            .sub .left{
                width: 300px;
                background-color: blue;
                position:absolute;
                left:0;
            }
            .sub .right{
                width: 300px;
                background-color: red;
                position:absolute;
                right:0;
                top:0
            }
            .sub .center{
                background-color: silver;
                position:absolute;
                left: 300px;
                right: 300px;
            }

    3. flex 布局

    flex布局是适用性很广的布局方式  ie8不兼容flex布局

      <div class="sub">
            <div class="layout left"></div>
            <div class="layout  center">
                1.这是三栏布局的中间部分
                </div>
            <div class="layout right"></div>
            
        </div> 
        <style>
            *{
               margin: 0;
               padding: 0;
            }
            .sub{
                display: flex;
            }
            .sub .layout{
                height:100px;  
            }
            .sub .left{
                width: 300px;
                background-color: blue;
            }
            .sub .right{
                width: 300px;
                background-color: red;
            }
            .sub .center{
                background-color: silver;
                flex:1
            }

    4. table 布局

     table 布局适用于很多场景,兼容性好   缺点,同时增高

    <div class="sub">
            <div class="layout left"></div>
            <div class="layout  center">
                1.这是三栏布局的中间部分
                </div>
            <div class="layout right"></div>
            
        </div> 
        <style>
            *{
               margin: 0;
               padding: 0;
            }
            .sub{
                display: table;
                width:100%
            }
            .sub .layout{
                height:100px;
                display: table-cell;  
            }
            .sub .left{
                width: 300px;
                background-color: blue;
            }
            .sub .right{
                width: 300px;
                background-color: red;
            }
            .sub .center{
                background-color: silver;
            }
        </style>

    5.网格布局

      <div class="sub">
            <div class="layout left"></div>
            <div class="layout  center">
                1.这是三栏布局的中间部分
                </div>
            <div class="layout right"></div>
            
        </div> 
        <style>
            *{
               margin: 0;
               padding: 0;
            }
            .sub{
                display: grid;
                width:100%;
                grid-template-rows:100px;
                grid-template-columns: 300px auto 300px;
            }
            .sub .layout{
                height:100px;
            }
            .sub .left{
                width: 300px;
                background-color: blue;
            }
            .sub .right{
                width: 300px;
                background-color: red;
            }
            .sub .center{
                background-color: silver;
            }
        </style>

     

    展开全文
  • 两者功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局 虽然两者实现方法略有差异,不过都遵循了以下要点: 1.两侧宽度固定,中间宽度自适应 2.中间部分在DOM结构上优先,以便先行渲染 3....
    圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局
    虽然两者的实现方法略有差异,不过都遵循了以下要点:
    
    1.两侧宽度固定,中间宽度自适应
    2.中间部分在DOM结构上优先,以便先行渲染
    3.允许三列中的任意一列成为最高列
    4.只需要使用一个额外的<div>标签

    圣杯布局

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>圣杯布局</title>
            <style type="text/css">
                .header{
                    height:50px;
                    background: #666;
                    text-align: center;
                }
                .main{
                    /*左右栏通过添加负的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 class="header">header</div>
        <div class="main">
          <div class="middle">middle</div>
          <div class="left">left</div>
          <div class="right">right</div>
        </div>
        <div class="footer">footer</div>
        </body>
    </html>

    双飞翼布局

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>双飞翼布局</title>
            <style type="text/css">
                .header {
                    height: 100px;
                    background: bisque;
                }
    
                .left {
                    width: 200px;
                    height: 300px;
                    background: coral;
                    float: left;
                    margin-left: -100%;
                    margin-right: -200px;
                }
    
                .center {
                    background: palegreen;
                    float: left;
                    width: 100%;
                    
                }
                .inside{
                    margin-left: 200px;
                    margin-right: 180px;
                }
    
                .right {
                    width: 180px;
                    height: 200px;
                    background: darkorange;
                    float: left;
                    margin-left: -180px;
                    
                }
    
                .footer {
                    height: 200px;
                    background: salmon;
                    clear: both;
                }
            </style>
        </head>
        <body>
            <div class="header">header</div>
            <div class="main">
                <div class="center">
                    <div class="inside">
                        中间自适应区域
                    </div>
                </div>
                <div class="left">左边固定区域</div>
                <div class="right">右边固定区域</div>
            </div>
            <div class="footer">footer</div>
        </body>
    </html>
    展开全文
  • 圣杯布局和双飞翼布局解决问题是一样,就是两边定宽,中间自适应的三栏布局,中间栏要放在文档流前面以优先渲染。 但是圣杯布局和双飞翼布局在实现方式上有一点差别。 双飞翼布局 HTML片段如下: main...
  • 实现方式: float 绝对定位 flexbox布局 table grid网格布局 &lt;!DOCTYPE html&gt; &lt;html lang="en"&...三栏自适应布局&lt;/title&gt; &lt;style t
  • 今天来练习并总结下三种布局方式来实现三栏式布局。 以下为三种方式html布局: <!--方法一--> <div id="content1"> <div class="middle">middle</div> <div class="left"&...
  • 最近在整理css布局的一些东西,下面是三栏布局,左右宽度固定,中间自适应的五种方式,供大家参考。 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;...
  • 写本文主要是为了解决利用CSS流体特性实现自适应的两栏/三栏布局 #先来了解一下什么是BFC 1.BFC定义 全称Block Formatting Context,中文直译为块级格式上下文。BFC就是一种布局方式,在这种布局方式...
  • 今天写一个供给大家参考学习,希望大家可以在这个基础上衍生一些其他,比如三栏布局的那种:左右固定,中间自适应的效果等等 使用方法: 1、引入head部分CSS代码 2、将body中代码部分拷贝到你需要地方
  • 常见的布局方式有: 浮动布局、Position定位、弹性(flex)布局、table布局、网格(grid)布局。 前提是左右宽度(假如左右宽度为100px),整个高度已知(假如高度为500px),中间宽度自适应。 1.浮动布局 float的实际初衷...
  • 页面布局:假设高度已知,请写出三栏布局,左右两栏宽度各为300px,中间自适应 欢迎使用Markdown编辑 你好! 这是你第一次使用 Markdown编辑器 所展示欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读...
  • 题目写一个三栏布局; 高度固定 左边300px,右边300px;中间自适应; 1 :float  &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="...
  • 方式一:浮动 方式二:定位 方式三:flex 方式四:表格布局 方式五:grid网格布局 <!DOCTYPE html> <html lang="en"> <...三栏布局几种实现方式</title> <style>...
  • 全局CSS设定 ... padding: 0;...浮动三栏布局 必须先写左右盒子再写中间盒子html结构,设置左右两个盒子宽高和浮动 &amp;amp;lt;section class=&amp;quot;layout float&amp;quot;&amp;
  • 前端开发页面布局中,常见页面布局方式有,比如两列布局,左边固定宽度,右边自适应宽度。以及列布局时候,两边固定宽度,中间宽度自适应。这样需求实现方式也很简单,下面介绍一种比较简单方法。 两...
  • table实现三栏布局 <div class="right"></div> <div class="left"></div> 网格解决方案 网格实现三栏布局 <div class="right"></div>
  • 在前端面试中,经常会遇到一个问题就是“怎么实现左右两端宽度固定,中间自适应”。下面我总结了五种常见的方式实现。先写下全局 style 吧<style> html * { padding: 0; margin: 0; } .layout { ...
  • 的布局为中左右。左右盒子定宽,中间100%,左盒子margin-left为-100%,右盒子margin-left为-宽度。 <div class="all"> <div class="main">456中间</div> <div class="left">1...

空空如也

空空如也

1 2 3 4 5 ... 10
收藏数 194
精华内容 77
关键字:

宽度自适应三栏的布局方式