基于float的几种布局

Freelander 发布于2019-08-29 11:03 / 3000人阅读

摘要：在这里介绍基于的几种布局浮动与两侧自适应的布局如图所示，左边没有限定宽度，右边宽度自适应。使用实现的布局，可以适用于两栏的布局。单侧固定的布局单侧固定的布局分为固定布局和流体布局。

在这里介绍基于float的几种布局.

1.浮动与两侧自适应的布局

如图所示，左边没有限定宽度，右边宽度自适应。使用table-cell实现的布局，可以适用于两栏的布局。

HTML代码




    
    与浮动与两侧自适应的布局



    
    与浮动与两侧自适应的布局与浮动与两侧自适应的布局与浮动与两侧自适应的布局与浮动与两侧自适应的布局与浮动与两侧自适应的布局与浮动与两侧自适应的布局与浮动与两侧自适应的布局

对应的CSS代码

    *{padding:0;margin:0;}
    .container{
            max-width:960px;
            margin:0 auto;
     }
    .left{
        float:left;
        margin-right:20px;
    }
    .right{
        height:220px;
        display: table-cell; /*像表格单元格一样显示*/
        width: 3000px;/*由于是根据内容而决定宽度，当内容不是很多的时候， 宽度没有被撑开，此时一些相对于这个元素定位的元素就会错位，故设置足够长的宽度，使其定位正常*/
        *width: auto;/*兼容IE6、7*/
        background:green;
    }

需要说明一点是：display: table-cell后，是根据内容来决定其实际的宽度。
table-cell在IE6、7中是不支持的，可以使用*width:auto进行兼容性处理,不过现在这两个版本IE的市场占有率很低，适当的时候可以删去。

2.右侧尺寸固定的浮动布局

分别有两种方式，一种不改变DOM树结构显示顺序，一种则会使DOM树结构顺序与显示的界面相异。

改变DOM树先后顺序的方法

HTML代码




    
    浮动与右侧尺寸固定的流体布局



    
    与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局

对应的CSS代码

*{padding:0;margin:0;}
    .container{max-width:960px;margin:0 auto;overflow:hidden;}
    .left{
        margin-right:200px;
        background:red;
    }
    .right{
        width:200px;
        height:100px;
        float: right;
        background:green;
    }

关键点在于，HTML代码中，把在右边显示的DIV放到左边显示的前面，然后通过float: right浮动到右边，可通过调整left盒子的margin-right来调整两个盒子之间的间距。
这种方式会破坏页面优先渲染顺序，它会先渲染右边的盒子，再渲染左边的盒子，视页面区域内容重要程度而定。

不改变DOM树先后顺序的方法

HTML代码




    
    浮动与右侧尺寸固定的流体布局



    

与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局

对应的CSS代码

*{padding:0;margin:0;}
    .container{max-width:960px;margin:0 auto;overflow:hidden;}
    .left{
            width:100%;
            float:left;
        background:red;
    }
    .right{
        width:200px;
        height:100px;
        float: left;
        margin-left:-200px;/*这个数值的大小是跟其宽度值相同的*/
        background:green;
    } 
    .left-content{
        margin-right:220px; //文字不被覆盖
    }

关于negative margin（负边距），w3c提到:

Given a large enough negative margin applied to a large enough element, the affected adjacent element can even be overlapped.

给定一个足够大的负边距，可以使受影响的相邻元素发生重合。

3.单侧固定的布局

单侧固定的布局分为固定布局和流体布局。
通用的HTML




    
    浮动与右侧尺寸固定的流体布局



    
    与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局

固定布局

对应的CSS代码

    *{padding:0;margin:0;}
    .container{max-width:960px;margin:0 auto;overflow:hidden;}
    .left{
        width:100px;
        height:100px;
        float:left;
        background:red;
    }
    .right{
        width:100px;
        height:100px;
        float: right;
        background:green;
    }

通过float:left; float:right;实现。

流体布局

对应的CSS代码

    *{padding:0;margin:0;}
    .container{max-width:960px;margin:0 auto;overflow:hidden;}
    .left{
        width:100px;
        height:100px;
        float:left;
        margin-right:20px;
        background:red;
    }
    .right{
        background:green;
    }

GPU云服务器云服务器最基本的几种 html的几种轮播 js的几种数据类型 js缓存的几种方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111386.html

实现三栏布局的几种方法

摘要：前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。但网格布局的兼容性不好。前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽...

golden_hamster 2019-08-02 11:55 评论0 收藏0
实现三栏布局的几种方法

摘要：前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。但网格布局的兼容性不好。前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽...

IamDLY 2019-08-29 17:12 评论0 收藏0
实现三栏布局的几种方法

摘要：前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。但网格布局的兼容性不好。前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽...

Hegel_Gu 2019-08-23 12:52 评论0 收藏0
几种常见的CSS布局

摘要：本文概要本文将介绍如下几种常见的布局其中实现三栏布局有多种方式，本文着重介绍圣杯布局和双飞翼布局。借助等高布局正负可解决，下文会介绍双飞翼布局特点同样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。本文概要本文将介绍如下几种常见的布局： showImg(https://segmentfault.com/img/remote/14600000...

FuisonDesign 2019-08-23 12:57 评论0 收藏0