常见css水平自适应布局

左右布局，左边固定，右边自适应布局

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的宽度是自适应占满全部的

用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以上的版本

用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的特性

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>

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水平自适应布局的更多相关文章

常见css垂直自适应布局（css解决方法）
css3的盒模型, css3中添加弹性盒模型,最新弹性盒模型是flex,之前为box <!DOCTYPE html> <html > <head> <titl ...
CSS流体(自适应)布局下宽度分离原则
CSS流体(自适应)布局下宽度分离原则这篇文章发布于 2011年02月28日,星期一,00:48,归类于 css相关. 阅读 73990 次, 今日 5 次 by zhangxinxu from h ...
演示：纯CSS实现自适应布局表格
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
CSS+DIV自适应布局
CSS+DIV自适应布局 1.两列布局(左右两侧,左侧固定宽度200px;右侧自适应占满) 代码如下: <!doctype html> <html> <head> ...
CSS流体(自适应)布局下宽度分离原则——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1463 一.简短的前言 ...
CSS之自适应布局webkit-box
自适应布局webkit-box,在平常的web横排布局中,会经常用到float或display:inline-block,但是在多种不同宽度的移动设备的自适应布局中用的话,还得设置百分比宽度和考虑清除 ...
CSS实现栅格布局
CSS实现栅格布局设置容器container: .grid-container { width: 100%; max-width: 1200px; } 清除浮动: .row:before, .row ...
常用样式制作思路自定义按钮~自适应布局~常见bug seajs简记初学者必知的HTML规范不容忽略的——CSS规范
常用样式制作思路学习常用样式总结参考来自这里带点文字链接列表利用:before实现 1 <!DOCTYPE html> 2 <html lang="en" ...
【转】CSS深入理解流体特性和BFC特性下多栏自适应布局
这篇文章发布于 2015年02月12日,星期四,23:36,归类于 css相关. 阅读 30873 次, 今日 63 次 by zhangxinxu from http://www.zhangxinx ...

随机推荐

js像素运算问题
通过DOM获取的某一距离属性(比如left)是带px单位的,直接对其算术运算不起效,要先把获取到的值处理一下去掉px单位. 方法一(用处理字符串的方式去除px): var x=document.get ...
Codeforces Round #354 (Div. 2) ABCD
Codeforces Round #354 (Div. 2) Problems # Name A Nicholas and Permutation standard input/out ...
php中引用&的真正理解-变量引用、函数引用、对象引用
php的引用(就是在变量或者函数.对象等前面加上&符号) //最重要就是删除引用的变量 ,只是引用的变量访问不了,但是内容并没有销毁在PHP 中引用的意思是:不同的名字访问同一个变量内容. ...
iOS 打开本地其他应用程序（URL Types）
iOS 打开本地其他应用程序(URL Types) /*前言废话:Xcode是神奇的,是我所见到的编译器中最为神奇的,如:它可以同时运行两个甚至更多Project到我们模拟器上,可以同时使用一个模拟器 ...
AVAudioPlayer
AVAudioPlayer在AVFoundation框架下,所以我们要导入AVFoundation.framework. AVAudioPlayer类封装了播放单个声音的能力.播放器可以用NSURL或 ...
java.lang.ClassNotFoundException: com.mysql.jdbc.Driver解决办法
这个问题的原因是没有导入mysql连接库,我从官网上下载后照着网上的教程各种导入无果,最后发现是我导入的文件错了.... 官网上下下来的压缩文件是这个,不过这并不是直接要导入的文件,首先解压文件,然后 ...
MDI窗体容器--2016年12月15日
MDI窗体容器多文档界面(Multiple-Document Interface)简称MDI窗体.MDI窗体用于同时显示多个文档,每个文档显示在各自的窗口中.MDI窗体中通常有包含子菜单的窗口菜单, ...
常用正则表达式整理[JavaScript]
URL /^(http\:\/\/|https\:\/\/)(.{4,})$/ 18位身份证号 //前17位数字,末位支持X/^\d{17}\d{1}$|^\d{17}x{1}$/ 手机号 //11位 ...
各大浏览器内核特性及对应的Browserhacks举例
1.浏览器内核指的是什么? 简化的浏览器=用户界面+渲染引擎+js解析引擎+数据存储+网络部件而通常所说的浏览器内核指的是页面渲染引擎(rendering engine). 2.渲染引擎 The r ...
LruCache算法原理及实现
LruCache算法原理及实现 LruCache算法原理 LRU为Least Recently Used的缩写,意思也就是近期最少使用算法.LruCache将LinkedHashMap的顺序设置为LR ...

常见css水平自适应布局

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

随机推荐

热门专题