css布局左右2边固定，中间自适应

1.position+margin
原理说明：通过绝对定位将两个侧栏固定，同样通过外边距给两个侧栏腾出空间，中间列自适应。

<style>.left, .right {position: absolute;top: 0;width: 200px;height:40px;background: red;}.left {left: 0;}.right {right: 0;}.main {margin: 0 200px;height:40px;background: #000;}
</style>
<div id="bd"><div class="main"></div><div class="left"></div><div class="right"></div>
</div>

2.float+margin

<style>.left,.right{height:40px;background: yellow;}.left {width: 100px;float: left;}.right {width: 200px;float: right;}.main {margin-left: 100px;margin-right: 200px;height:40px;background: #000;}</style>
<div id="bd"><div class="left"></div><div class="right"></div><div class="main"></div>
</div>

3.圣杯布局（float+margin+padding+position:relative）

<style>#bd {padding: 0 230px 0 190px;height:40px;width:100%;box-sizing: border-box;}.main {float: left;width: 100%;height:40px;background: #000;}.left {float: left;width: 190px;margin-left: -100%;position: relative;left: -190px;height:40px;background: red;}.right {float: left;width: 230px;margin-left: -230px;position: relative;right: -230px;height:40px;background: yellow;}</style>
<div id="bd"><div class="main"></div><div class="left"></div><div class="right"></div>
</div>

布局步骤:

三者都设置向左浮动。
设置main宽度为100%，设置两侧栏的宽度。
设置负边距，left设置负左边距为100%，right设置负左边距为负的自身宽度。
设置main的padding值给左右两个子面板留出空间。
设置两个子面板为相对定位，left的left值为负的left宽度，right的right值为负的left宽度。

4.双飞翼布局（float+margin）

<style>#main-wrap {float: left;width: 100%;background: #000;}#main {margin: 0 230px 0 190px;}.sub {float: left;width: 190px;margin-left: -100%;background: yellow;}.extra {float: left;width: 230px;margin-left: -230px;background: red;}</style>
<div id="main-wrap" class="column"><div id="main">#main</div>
</div>
<div class="sub">left</div>
<div class="extra">right</div>

布局步骤:

三者都设置向左浮动。
设置main-wrap宽度为100%，设置两个侧栏的宽度。
设置负边距，sub设置负左边距为100%，extra设置负左边距为负的自身宽度。
设置main的margin值给左右两个子面板留出空间。

5.flex

<style>#bd{display: flex}.left,.right{height:40px;background: yellow;}.left {width: 100px;}.right {width: 200px;}.main {height:40px;background: #000;flex:1;}</style>
<div id="bd"><div class="left"></div><div class="main"></div><div class="right"></div>
</div>

css布局左右2边固定，中间自适应相关推荐

css布局：左边固定宽度，右边自适应宽度或右侧固定，左侧自适应三种方法
方法一:浮动布局这种方法我采用的是左边浮动,右边加上一个margin-left值,让他实现左边固定,右边自适应的布局效果 HTML Markup <div id="left" ...
在php中页面布局 3列左右侧固定中间自适应居中,css三列布局--两边固定中间自适应和中间固定两边自适应...
三列布局本篇讲三列布局,面试常考题,自己总结的,如有什么问题,欢迎指出!我会用红色标注出主要作用部分,都是最精简的写法,,没有多余的修饰. 布局方式一:两边固定中间自适应 1.flex布局思路:将 ...
css三列布局--两边固定中间自适应和中间固定两边自适应
三列布局本篇讲三列布局,面试常考题,自己总结的,如有什么问题,欢迎指出!我会用红色标注出主要作用部分,都是最精简的写法,,没有多余的修饰. 布局方式一:两边固定中间自适应 1.flex布局思路:将 ...
html固定右侧显示,html+css布局之--左边固定宽，右侧自适应（4种方法）
今天,在网上看到一个题目,关于布局的,左边固定宽,右侧自适应(不少于3种方法),看到问题手痒自己试了一下,想了四种方法,码一下. 有好的方法,可以告诉我! html: 第一种:定位+margin-le ...
CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼
文章转自:http://www.cnblogs.com/honoka/p/5161836.html 今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽 ...
CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼...
今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...
div固定在浏览器顶部_手写几种常见的css布局，1垂直两栏左边固定右边自适应，垂直3栏左右固定中间自适应...
1垂直两栏右边固定左边自适应的四种写法 <!DOCTYPE html> <html lang="en"><head><meta chars ...
html的高度自适应,CSS布局自适应高度解决方法
原作者:Alex Robinson 原文标题:Equal Height Columns 这是一个比较典型的三行二列布局,每列高度(事先并不能确定哪列的高度)的相同,是每个设计师追求的目标,按一般的做法 ...
html流动布局,自适应css布局——流动布局新时代
流动网页设计有很多好处,但也只有在正确使用的时候.合适的技巧会使页面在大屏幕.小屏幕抑.PDA小屏幕上都能得到良好的呈现.但是,糟糕的代码结构,对于流动布局来说将是灾难性的.因此,我们需要针对大多数流 ...

css布局左右2边固定，中间自适应

css布局左右2边固定，中间自适应相关推荐

最新文章

热门文章