前面的话

　　说起自适应布局方式，单列定宽单列自适应布局是最基本的布局形式。本文将从float、inline-block、table、absolute、flex和grid这六种思路来详细说明如何巧妙地实现布局

float

【思路一】float

　　说起两列布局，最常见的就是使用float来实现。float浮动布局的缺点是浮动后会造成文本环绕等效果，以及需要及时清除浮动。如果各浮动元素的高度不同时，可能会出犬牙交错的效果

【1】float + margin

　　将定宽的一列使用float，而自适应的一列使用计算后的margin

<style>

p{margin: 0;}

.parent{overflow: hidden;zoom: 1;}

.left{float: left;width: 100px;}

.right{margin-left: 120px;}

</style>
<div class="parent" style="">

    <div class="left" style="">

        <p>left</p>

    </div>

    <div class="right"  style="">

        <p>right</p>

        <p>right</p>

    </div>

</div>

　　[缺点1]IE6-浏览器下3像素bug，具体表现在右侧首行文字会向右偏移3px。解决办法是在left元素上设置margin-right: -100px

　　[缺点2]当右侧容器中有元素清除浮动时，会使该元素不与左侧浮动元素同行，从而出现文字下沉现象

【2】float + margin + (fix)

　　(fix)代表增加结构，为了解决上述方法中的两个缺点，可以通过增加结构来实现。自适应的一列外侧增加一层结构.rightWrap并设置浮动。要实现自适应效果，.rightWrap宽度必须设置为100%。若不设置，float后的元素宽度将由内容撑开。同时再配合盒模型属性的计算，设置计算后的负margin值，使两列元素在同一行显示。同时两列之间的间距由.right的margin值确定。由于右侧元素会层叠在左侧元素之上，.left需要使用relative来提升层级

<style>

p{margin: 0;}

.parent{overflow: hidden;zoom: 1;}

.left{position: relative;float: left;width: 100px;}

.rightWrap{float: left;width: 100%;margin-left: -100px;}

.right{margin-left: 120px;}

</style>
<div class="parent" style="">

    <div class="left" style="">

        <p>left</p>

    </div>

    <div class="rightWrap" style="">

        <div class="right"  style="">

            <p>right</p>

            <p>right</p>

        </div>

    </div>

</div>

【3】float + margin + calc

　　除了增加结构的方法外，还可以使用calc()

　　[注意]IE8-、android4.3-、IOS5.1-不支持，android4.4+只支持加减运算

<style>

p{margin: 0;}

.parent{overflow: hidden;zoom: 1;}

.left{float: left;width: 100px;margin-right: 20px;}

.right{float: left;width: calc(100% - 120px);}

</style>
<div class="parent" style="">

    <div class="left" style="">

        <p>left</p>

    </div>

    <div class="right"  style="">

        <p>right</p>

        <p>right</p>

    </div>

</div>

【4】float + overflow

　　还可以使用overflow属性来触发bfc，来阻止浮动造成的文字环绕效果。由于使用overflow不会改变元素的宽度属性，所以不需要重新设置宽度。由于设置overflow:hidden并不会触发IE6-浏览器的haslayout属性，所以需要设置zoom:1来兼容IE6-浏览器

<style>

p{margin: 0;}

.parent{overflow: hidden;zoom: 1;}

.left{ float: left;width: 100px;margin-right: 20px;}

.right{overflow: hidden;zoom: 1;}

</style>
<div class="parent" style="">

    <div class="left" style="">

        <p>left</p>

    </div>

    <div class="right"  style="">

        <p>right</p>

        <p>right</p>

    </div>

</div>

inline-block

【思路二】inline-block

　　inline-block内联块布局的主要缺点是需要设置垂直对齐方式vertical-align，则需要处理换行符解析成空格的间隙问题。IE7-浏览器不支持给块级元素设置inline-block属性，兼容代码是display:inline;zoom:1;

【1】inline-block + margin + calc

　　一般来说，要解决inline-block元素之间的间隙问题，要在父级设置font-size为0，然后在子元素中将font-size设置为默认大小

　　[注意]IE8-、android4.3-、IOS5.1-不支持，android4.4+只支持加减运算

<style>

p{margin: 0;}

.parent{font-size: 0;}

.left{display:inline-block;vertical-align:top;width:100px;margin-right:20px;font-size:16px;}

.right{display:inline-block;vertical-align:top;width:calc(100% - 120px);font-size:16px;}

</style>
<div class="parent" style="">

    <div class="left" style="">

        <p>left</p>

    </div>

    <div class="right"  style="">

        <p>right</p>

        <p>right</p>

    </div>

</div>

【2】inline-block + margin + (fix)

<style>

p{margin: 0;}

.parent{font-size: 0;}

.left{position:relative;display:inline-block;vertical-align:top;width:100px;font-size:16px;}

.rightWrap{display:inline-block;vertical-align:top;width:100%;margin-left: -100px;font-size:16px;}

.right{margin-left: 120px;}

</style>
<div class="parent" style="">

    <div class="left" style="">

        <p>left</p>

    </div>

    <div class="rightWrap" style="">

        <div class="right"  style="">

            <p>right</p>

            <p>right</p>

        </div>

    </div>

</div>

table

【思路三】table

　　使用table布局的缺点是元素被设置为table后，内容撑开宽度，所以需要设置width:100%。若要兼容IE7-浏览器，需要改为<table>结构。由于table-cell元素无法设置margin，若需要在元素间设置间距，需要增加结构

<style>

p{margin: 0;}

.parent{display:table;width: 100%;table-layout: fixed;}

.left,.rightWrap{display:table-cell;}

.left{width: 100px;}

.right{margin-left: 20px;}

</style>
<div class="parent" style="">

    <div class="left" style="">

        <p>left</p>

    </div>

    <div class="rightWrap" style="">

        <div class="right"  style="">

            <p>right</p>

            <p>right</p>

        </div>

    </div>

</div>

absolute

【思路四】absolute

　　absolute布局的缺点是由于父元素需要设置为relative，且子元素设置为absolute，所以父元素的高度并不是由子元素撑开的，需要单独设置。

　　[注意]IE6-不支持相对的偏移属性同时设置

<style>

p{margin: 0;}

.parent{position: relative;width:100%;height:40px;}

.left{position: absolute;left:0;width:100px;}

.right{position: absolute;left:120px;right:0;}

</style>
<div class="parent" style="">

    <div class="left" style="">

        <p>left</p>

    </div>

    <div class="right"  style="">

        <p>right</p>

        <p>right</p>

    </div>

</div>

flex

【思路五】flex

　　flex弹性盒模型是非常强大的布局方式。但由于其性能消耗较大，适合于局部小范围的布局

　　[注意]IE9-浏览器不支持

<style>

p{margin: 0;}

.parent{display: flex;}

.left{width:100px;margin-right: 20px;}

.right{flex:1;}

</style>
<div class="parent" style="">

    <div class="left" style="">

        <p>left</p>

    </div>

    <div class="right"  style="">

        <p>right</p>

        <p>right</p>

    </div>

</div>

grid

【思路六】: 使用栅格布局grid实现

　　[注意]IE10-浏览器不支持

<style>

p{margin: 0;}

.parent{display: grid;grid-template-columns: 100px 1fr;grid-gap:20px}

</style>
<div class="parent" style="">

    <div class="left" style="">

        <p>left</p>

    </div>

    <div class="right"  style="">

        <p>right</p>

        <p>right</p>

    </div>

</div>

转载：http://www.cnblogs.com/xiaohuochai/p/5452865.html

css 两列布局中单列定宽单列自适应布局的6种思路的更多相关文章

  1. CSS布局 两列布局之单列定宽,单列自适应布局思路

    前言 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.比如斗鱼的直播间,后台管理系统都是常用的 我们将从 float, inline-block, table, absolute, fl ...

  2. css 两列自适应布局的4种思路

    前面的话 前面已经介绍过css 两列布局中单列定宽单列自适应布局的6种思路的两列布局,而两列自适应布局是指一列由内容撑开,另一列撑满剩余宽度的布局方式.本文将从float.table.flex和gri ...

  3. css实现左边定宽右边自适应的5种方法总汇

    在网页布局中,通常需要实现左边定宽右边自适应布局,默认html的结构如下: <div class="box"> <div class="left&quo ...

  4. CSS两列及三列自适应布局方法整理

    布局 自适应 两列 三列 在传统方法的基础上加入了Flex布局并阐述各方法的优缺点,希望对大家有所帮助.先上目录: 两列布局:左侧定宽,右侧自适应 方法一:利用float和负外边距 方法二:利用外边距 ...

  5. css两列布局，一边固定宽度，另一边自适应

    <!DOCTYPE HTML><HTML>    <head>                <meta charset="utf-8" ...

  6. css高度已知，左右定宽，中间自适应三栏布局

    css高度已知,左右定宽,中间自适应三栏布局: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  7. CSS两列布局——左侧宽度固定，右侧宽度自适应的3种方法

    1.左侧绝对定位法 直接看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  8. css布局：左边定宽、右边自适应

    方法一 : 左边 左浮动,右边 margin-left *{margin: 0;padding: 0;} .left{ float: left; width: 200px; border: 1px s ...

  9. CSS两列高度自适应，右边自适应

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. java程序换图标

    ImageIcon img = new ImageIcon("D:\\mahou-in-action\\ShiJuanFenXi\\src\\zoom-in.png"); inst ...

  2. Jquery的简单API

    dsfsdjgsdjgsdjkg <script>console.log('erftwet')</script>

  3. [vijos1066]弱弱的战壕

    描述 永恒和mx正在玩一个即时战略游戏,名字嘛~~~~~~恕本人记性不好,忘了-_-b. mx在他的基地附近建立了n个战壕,每个战壕都是一个独立的作战单位,射程可以达到无限(“mx不赢定了?!?”永恒 ...

  4. 笔试算法题（46）：简介 - 二叉堆 & 二项树 & 二项堆 & 斐波那契堆

    二叉堆(Binary Heap) 二叉堆是完全二叉树(或者近似完全二叉树):其满足堆的特性:父节点的值>=(<=)任何一个子节点的键值,并且每个左子树或者右子树都是一 个二叉堆(最小堆或者 ...

  5. js判断是否是大小写，数字等方法

    function isEmail(str){ var regu = "^(([0-9a-zA-Z]+)|([0-9a-zA-Z]+[_.0-9a-zA-Z-]*))@([a-zA-Z0-9- ...

  6. nginx负载均衡核心组件介绍

    一.nginx upstream 模块介绍 1.upstream模块介绍 nginx的负载均衡功能依赖于ngx_http_upstream_module模块,所支持的代理方式包括 proxy_pass ...

  7. js中如何把RGB颜色转换为16进制颜色

    将RGB颜色值转换为16进制颜色值,主要是将 R.G.B 值分别转换为对应的十六进制值,填入 #RRGGBB 中. 推荐在线颜色转换工具:http://www.ecjson.com/rgbhex/ 例 ...

  8. Python学习笔记（六）测试开发之接口开发

    Python的接口开发要使用到flask.Flask(__name__) 下面是一个简单的接口实例程序及访问效果: import flaskserver = flask.Flask(__name__) ...

  9. Python中关于集合的介绍及用法

    一.集合的含义及创建方法 集合(set)是一种无序的并且里面存放不同元素的序列. 集合可以使用大括号 { } 或者 set() 函数创建集合,注意:创建一个空集合必须用 set() 而不是 { },因 ...

  10. CentOS6.5生产环境系统安装

    CentOS 6.5系统安装 1-1 将预先准备的CentOS 6.5安装光盘插入光驱中,开机/重启系统时,系统会进行自检,自检完毕就会出现安装系统时的引导界面,如图1-1所示.1-2 使用键盘方向键 ...