• 左右布局,左边固定,右边自适应布局
  1. BFC方法解决

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>div + css宽度自适应(液态布局)</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    /*左边栏,设定宽度*/
    body,#wrap{
    width: 100%;
    border: 1px yellow;
    }
    .wrap_l
    {
    float: left;
    height: 150px;
    width: 150px;
    border: 1px solid #333;
    }
    /*中间栏,宽度auto,*/
    .wrap_m
    {
    overflow: hidden;
    border: 1px solid #000;
    background: red;
    }
    </style>
    </head>
    <body>
    <div id="wrap">
    <div class="wrap_l">
    这是左边部分<br />
    这是左边部分<br />
    这是左边部分
    </div>
    <div class="wrap_m">
    这是中间部分
    </div>
    </div>
    </body> </html>

    原理:给左侧添加

    overflow: hidden;将div改变成BFC模型,display:block;标签的dom的宽度是自适应占满全部的
  2. 用position:absolute;处理
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>div + css宽度自适应(液态布局)</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    /*左边栏,设定宽度*/
    body,#wrap{
    width: 100%;
    margin: 0px;
    border: 1px yellow;
    }
    .wrap_l
    {
    float: left;
    height: 150px;
    width: 150px;
    border: 1px solid #333;
    }
    /*中间栏,宽度auto,*/
    .wrap_m
    {
    position:absolute;
    left:152px;
    right: 0px;
    border: 1px solid #000;
    background: red;
    }
    </style>
    </head>
    <body>
    <div id="wrap">
    <div class="wrap_l">
    这是左边部分<br />
    这是左边部分<br />
    这是左边部分
    </div>
    <div class="wrap_m">
    这是中间部分
    </div>
    </div>
    </body> </html>

  一般以父元素未计算元素,父元素一般有一定的宽度,绝对布局是相对父dom元素的,如果相对父dom元素无效,可以将父dom元素的postion:relative相对出来

这个写法兼容ie6以上的版本

  1. 用table布局

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>div + css宽度自适应(液态布局)</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    /*左边栏,设定宽度*/
    html,body{
    width: 100%;
    height: 100%
    }
    </style>
    </head>
    <body>
    <table style="width:100%;height:100%;background:red">
    <tr>
    <td style="background:yellow;width:100px">我是左边</td><td style="background:blue">我是右边</td>
    </tr>
    </table>
    </body> </html>

  table的布局的其实实现原理也部分设置到BFC的特性

  1. display:table 仿table布局

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>div + css宽度自适应(液态布局)</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    /*左边栏,设定宽度*/
    html,body{
    width: 100%;
    height: 100%
    }
    #wrap{
    width: 100%;
    height: 50%;
    display: table;
    }
    .wrap_l
    {
    height: 150px;
    width: 150px;
    display: table-cell;
    border: 1px solid #333;
    }
    /*中间栏,宽度auto,*/
    .wrap_m
    {
    display: table-cell;
    border: 1px solid #000;
    background: red;
    }
    </style>
    </head>
    <body>
    <div id="wrap">
    <div class="wrap_l">
    这是左边部分<br />
    这是左边部分<br />
    这是左边部分
    </div>
    <div class="wrap_m">
    这是中间部分
    </div>
    </div>
    <table style="width:100%;height:50%;background:red">
    <tr>
    <td style="background:yellow;width:100px">我是左边</td><td style="background:blue">我是右边</td>
    </tr>
    </table>
    </body>
    </html>
  2. css3解决方案,主要利用弹性盒模型
    <!DOCTYPE html>
    <html >
    <head>
    <title>div + css宽度自适应(液态布局)</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    /*左边栏,设定宽度*/
    html,body{
    width: 100%;
    height: 100%
    }
    #wrap{
    display: flex;
    width: 100%;
    }
    .wrap_l
    {
    height: 150px;
    width: 150px;
    background: yellow;
    }
    /*中间栏,宽度auto,*/
    .wrap_m
    {
    flex:1;
    background: blue;
    }
    </style>
    </head>
    <body>
    <div id="wrap">
    <div class="wrap_l">
    这是左边部分<br />
    这是左边部分<br />
    这是左边部分
    </div>
    <div class="wrap_m">
    这是中间部分
    </div>
    </div>
    </body>
    </html>

  css3给我们提供的很多css2中很多很繁琐的问题,在css3为我们提供了弹性盒模型,之前的css3标签是display:box之后版本为flex,

  它的特性就是:在子区域内添加任意数量的元素水平和竖直排序,子元素可以设置标签flex:1 控制所占的百分比,水平标签一般设置flex-direction:column 这种写法兼容最新版,老版本的是box-orient:horizontal

常见css水平自适应布局的更多相关文章

  1. 常见css垂直自适应布局(css解决方法)

    css3的盒模型, css3中添加弹性盒模型,最新弹性盒模型是flex,之前为box <!DOCTYPE html> <html > <head> <titl ...

  2. CSS流体(自适应)布局下宽度分离原则

    CSS流体(自适应)布局下宽度分离原则 这篇文章发布于 2011年02月28日,星期一,00:48,归类于 css相关. 阅读 73990 次, 今日 5 次 by zhangxinxu from h ...

  3. 演示:纯CSS实现自适应布局表格

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

  4. CSS+DIV自适应布局

    CSS+DIV自适应布局 1.两列布局(左右两侧,左侧固定宽度200px;右侧自适应占满) 代码如下: <!doctype html> <html> <head> ...

  5. CSS流体(自适应)布局下宽度分离原则——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1463 一.简短的前言 ...

  6. CSS之自适应布局webkit-box

    自适应布局webkit-box,在平常的web横排布局中,会经常用到float或display:inline-block,但是在多种不同宽度的移动设备的自适应布局中用的话,还得设置百分比宽度和考虑清除 ...

  7. CSS实现栅格布局

    CSS实现栅格布局 设置容器container: .grid-container { width: 100%; max-width: 1200px; } 清除浮动: .row:before, .row ...

  8. 常用样式制作思路 自定义按钮~自适应布局~常见bug seajs简记 初学者必知的HTML规范 不容忽略的——CSS规范

    常用样式制作思路   学习常用样式总结参考来自这里 带点文字链接列表利用:before实现 1 <!DOCTYPE html> 2 <html lang="en" ...

  9. 【转】CSS深入理解流体特性和BFC特性下多栏自适应布局

    这篇文章发布于 2015年02月12日,星期四,23:36,归类于 css相关. 阅读 30873 次, 今日 63 次 by zhangxinxu from http://www.zhangxinx ...

随机推荐

  1. Codeforces Round #354 (Div. 2) ABCD

    Codeforces Round #354 (Div. 2) Problems     # Name     A Nicholas and Permutation standard input/out ...

  2. C# Byte[] 转String 无损转换

    C# Byte[] 转String 无损转换 转载请注明出处 http://www.cnblogs.com/Huerye/ /// <summary> /// string 转成byte[ ...

  3. Linux命令-自动挂载文件/etc/fstab功能详解[转]

    一./etc/fstab文件的作用 磁盘被手动挂载之后都必须把挂载信息写入/etc/fstab这个文件中,否则下次开机启动时仍然需要重新挂载. 系统开机时会主动读取/etc/fstab这个文件中的内容 ...

  4. JavaScript面向对象和原型函数

    对象,是javascript中非常重要的一个梗,是否能透彻的理解它直接关系到你对整个javascript体系的基础理解,说白了,javascript就是一群对象在搅..(哔!). 常用的几种对象创建模 ...

  5. Id.value与document.getElementById("Id").value的区别

    如果标签Id在Form表单里面的话,直接Id.value就不能用了,而是要用Form.Id.value来取值或设置值 所以最好用document.getElementById("Id&quo ...

  6. 让ecshop模板支持php运算

    让ecshop模板支持php运算在 cls_template.php 底部加入函数: /** * 处理if标签 * * @access public * @param string $tag_args ...

  7. C#微信公众号开发系列教程二(新手接入指南)

    http://www.cnblogs.com/zskbll/p/4093954.html 此系列前面已经更新了两篇博文了,都是微信开发的前期准备工作,现在切入正题,本篇讲解新手接入的步骤与方法,大神可 ...

  8. Linux kernel4.4.12 添加make menuconfig 可选项

    Linux kernel 源码添加可选项 闲来无事,顺便记录一篇在Linux kernel make menuconfig 内添加一个可选项. 说不定将来就要用到这个东西呢. linux kernel ...

  9. Java中关于String类型的10个问题

    1. 如何比较两个字符串?用“=”还是equals 简单来说,“==”是用来检测俩引用是不是指向内存中的同一个对象,而equals()方法则检测的是两个对象的值是否相等.只要你想检测俩字符串是不是相等 ...

  10. hibernate id 策略

    @Id@GeneratedValue(generator = "paymentableGenerator")@GenericGenerator(name = "payme ...