常见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 ...
随机推荐
- String StringBuffer StringBuilder
package com.test; import java.util.Date; /*** * * // 输出的结果是:// 来一个测试// 来一个测试如果只输出这句就证明了String是不可变的// ...
- .net MVC中异常日志
在日常工作中,我们有些项目可能进入了维护期,但是项目可能存在一些潜伏较深的bug导致我们在测试阶段并未发现,那么错误日志记录为我们的项目维护起着重要的作用.记录系统日志的方法如下 1.在系统根目录建立 ...
- SQL分页获取数据
SQL Server分页 select * from (') t Oracle分页 SELECT * FROM (' ORDER BY MaterialNM) t
- &&&&数组去重方法总结&&&&&
[数组去重]本文一共总结了5种方法: //方法一:sort方法 var ary = [1, 4, 2, 3, 1, 2, 2, 3, 3, 2, 5, 2, 1, 2];Array.prototype ...
- excel 2010 学习笔记一 Vlookup 函数的使用
有这么一句话说的好:在商用场合里,能证明你会基本的EXCEL操作技巧的两个检查标准就是会不会用VLOOKUP函数以及数据透视表功能,那么今天就来总结一下VLOOKUP的一些简单实用的功能. 1.VLO ...
- 元素堆叠问题、z-index、position
多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...
- IE7 自动为文件路径添加域名
对于图片等文件的路径,一般在同一个域名下的文件都会使用相对路径,但如果使用JS获取文件的路径浏览器获取到的路径都是相对路径,但IE7会自动为路径添加域名变成绝对路径... IE7下图片路径,在文件相对 ...
- PhotoSwipe插件的使用
1.首先引入插件 <link rel="stylesheet" href="css/photoswipe.css"> <link rel=&q ...
- ACM/ICPC 之 中国剩余定理+容斥原理(HDU5768)
二进制枚举+容斥原理+中国剩余定理 #include<iostream> #include<cstring> #include<cstdio> #include&l ...
- java--字符串
一.基本数据类型 基本类型 大小 对应的包装类 最小值 最大值 byte 8-bit Java.lang.Byte -128 +127 short 2Byte= 16bit Java.lang.Sho ...