css两边中间自适应优先加载,css布局两端固定中间自适应

第一种：采用浮动

1.1首先来看一下网上一个哥们给的代码

左

右

中

div{

height: 200px;

}

.left{

float: left;

background: #bfa;

width: 200px;

}

.right{

float:right;

width: 200px;

background: #baf;

}

.center{

width: 100%;

margin: 0 200px;

margin-right: 100px;

background: #bdf;

}

效果图如下：

哎！乍一看，好像真的可以，可是当你把右侧的盒子和左侧的盒子删除后你将看到如下画面

也就是说左侧确实空出了空间，可是右侧的实际情况只是：右盒子覆盖在了中间盒子上面，中间盒子的大小是中间的蓝色加上右侧的紫色部分

即：margin-right其实有效果的，只是在默认即标准流的情况的下显示不出来效果。

这样就会导致一个问题：虽然文字在中间的盒子中不会受到影响，当时当你在中间的盒子加上一些元素时会发现这个盒子达不到你预期想要的效果

代码如下

这时small的宽度为：网页宽度-左侧盒子宽度

而不是：网页宽度减去-左侧盒子宽度-右侧盒子宽度 也就是会影响布局

于是我抖了个机灵将margin换成padding

即1.2

相比于上一个的优点即不影响布局，但是该盒子的颜色会“溢出“

第二种：采用绝对定位

左

右

中

.left,.right{

position: absolute;

width: 220px;

height: 250px;

top: 0;

}

.left{

background: #bfa;

}

.right{

right: 0;

background: #baf;

}

.center{

width: 100%;

height: 250px;

padding: 0 220px;

box-sizing: border-box;

margin-top: 0;

background: #bdf;

}

第三种：弹性布局

利用一个div作为容器，并使其display为flex，另左右宽度固定后设置中间盒子的flex为1即可，代码如下

左

中

右

.big{

display: flex;

}

.big div{

height: 200px;

}

.left{

width: 200px;

background: #bfa;

margin-top: 50px;

}

.right{

width: 200px;

background: #baf;

margin-top: 50px;

}

.center{

flex:1;

background: #bdf;

}

优点：简便，且不会有上述的“颜色溢出”的毛病

缺点：flex对低版本的浏览器兼容性不是很好

css布局两边固定中间自适应的四种方法

第一种:左右侧采用浮动 中间采用margin-left 和 margin-right 方法. 代码如下:

var g_selProvince; ...

【BZOJ 1088】 [SCOI2005]扫雷Mine

Description 相信大家都玩过扫雷的游戏.那是在一个n*m的矩阵里面有一些雷,要你根据一些信息找出雷来.万圣节到了,“余”人国流行起了一种简单的扫雷游戏,这个游戏规则和扫雷一样,如果某个格子没 ...

POJ1182

这题需要注意就是 并查集中 相对位置 注意与绝对距离区别 #include #define maxn 50005 int ans,i,a,b,p,fa,fb,n,k; in ...

Prefixes and Suffixes

Codeforces Round #246 (Div. 2) D:http://codeforces.com/contest/432/problem/D 题意:给你一个长度不超过10^5的字符串.要你 ...

使用AutoTools自动生成Makefile

前两天赶时间写了个简易的数据库系统,实现了简单的增删改查等功能.因为赶实验...无节操的我用shell实现的文件读写...咳咳...这都不是重点,重点是自己写Makefile感觉有点不伦不类...虽然 ...

java 参数传值

基本数据类型参数的传值,参数为基本数据类型 class Computer{ int add(int x,int y){ return x+y; } } public class Example4_6 ...

用div做下拉列表