CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)
经常在工作中或者在面试中会碰到这样的问题，比如我想要个布局 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题。
& & &下面我们分别来学习下，当然我也是总结下而已，有如以下方法：
& & &一： 右侧固定宽度 左侧自适应
　 第一种方法：左侧用margin-right，右侧float：right &就可以实现。
& & HTML代码可以如下写:
& & &div class=&box-left&&
& & & & &a href=&& target=&_blank&&我是龙恩&/a&
& & &/div&
　 &div class=&box-right&&
& & & & &a href=&& target=&_blank&&我是龙恩&/a&
& & &/div&
　 代码可以如下写：
& & .box-left{height:300margin-right:300background:#DDD;}
& & .box-right{width:300height:300float:background:#AAA;}
& & 如上代码就可以实现效果。
& & 第2种方法：左侧同样用margin-right &右侧采用绝对定位 如下代码所示：
& & HTML代码如下：
& & &div class=&bd&&
& & & & &div class=&bd-left&&
& & & & & & &a href=&& target=&_blank&&我是龙恩&/a&
& & & & &/div&
& & & & &div class=&bd-right&&
& & & & & & &a href=&& target=&_blank&&我是龙恩&/a&
& & & & &/div&
& & &/div&
&CSS代码如下：
&.bd{position:}
&.bd-left{height:300;margin-right:300background:#DDD;}
&.bd-right{width:300height:300position:top:0;right:0;background:#AAA;}
&第三种方法：右侧浮动 且 用负margin值
&HTML代码如下：
&&div class=&wrap&&
& & & & &div class=&wrap-left&&
& & & & & & &div class=&left-con&&
& & & & & & & & &a href=&& target=&_blank&&我是龙恩&/a&
& & & & & & &/div&
& & & & &/div&
& & & & &div class=&wrap-right&&
& & & & & & &a href=&& target=&_blank&&我是龙恩&/a&
& & & & &/div&
& & &/div&
& CSS代码如下：
& .wrap{overflow:background:#EEE;}
& .wrap-right{width:300position:float:margin-left:-300background:#AAA;}
& .wrap-left{width:100%;float:}
& .left-con{margin-right:300background:#DDD;}
& .left-con,.wrap-right{height:300}
以上是我总结的三种html css 两列布局方法(左侧自适应 右侧固定)，如有不足的地方 请大家多多指教。下面我们来看看三列布局(左右固定 中间自适应的情况)。
&二：左右固定 中间自适应的情况
&我目前总结了2种方法 如下：
&第一种：左右侧采用浮动 中间采用margin-left 和 margin-right 方法。
&代码如下：
& &&div style=&width:100%; margin:0&&&
& & & &&div style=&width:200 float: background-color:#960&&这是右侧的内容 固定宽度&/div&
& & & &&div style=&width:150 float: background:#6FF&&这是左侧的内容 固定宽度&/div&
& & & &&div style=&margin-left:150margin-right:200 background-color:#9F3&&中间内容，自适应宽度&/div&
& & &/div&
&第二种：左右两侧采用绝对定位 中间同样采用margin-left margin-right方法：
&HTML代码如下：
&&div class=&l-sidebar&&&/div&
&&div class=&mainbar&&&/div&
&&div class=&r-sidebar&&&/div&
CSS代码如下：
&.l-sidebar {
&　　width:200
&　　height:500
&　　position:
　　 top:0;
　　 left:0;
&　　background:
.mainbar {
　　 margin-left:200
　　 height:500
　　 margin-right:300
&　　background:
.r-sidebar {
　　 width:300
　　height:500
&　　position:
　　top:0;
&　　right:0;
&　　background:
以上是我们日常工作中的一些总结！如有不足的地方 请留言！！一起互相讨论学习！
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467142',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'css当中的margin与position定位问题_百度知道老生长谈：css实现右侧固定宽度，左侧宽度自适应 - 脚儿网一个关于css中margin-right没有效果的问题
作者：佚名
字体：[ ] 来源：互联网 时间：06-06 15:10:37
margin-right其实有效果的，只是在默认即标准流的情况的下显示不出来效果。如果脱离标准流呢？想到这个，就立马在css文件中加了一个：float:然后在测试的时候就能看到margin-right的效果了
今天在群里面，有人抛出了一个关于css中margin-right没有效果的问题。CSS代码和HTML代码如下： 代码如下: .style1{ width:400 height:440 background-color: border:5 margin-top:20%; margin-right:30%; } 代码如下: &html& &head& &link rel="stylesheet" type="text/css" href="mystyle.css"& &/head& &body& &div class="style1"&&img src="bei.jpg"&&/div& &/body& &/html& 把他的代码copy下来，换一张图片，我做了一个test，还真的不行。 &难道是top会隐藏掉right的效果？或者跟顺序有关？后来证明这些都是错误的想法。结合w3school对margin-right和自己隐约的记忆：浏览器是默认左对齐的。灵感一来，margin-right其实有效果的，只是在默认即标准流的情况的下显示不出来效果。如果脱离标准流呢？想到这个，就立马在css文件中加了一个：float:然后在测试的时候就能看到margin-right的效果了。 &用float:left也是不行的，这跟默认的情况是差不多的。 PS：关于right属性无效的原因：right属性只有在position是absolute的情况下才有效，而默认的position值是static，right属性是无效的。建议能不使用right就不要使用right属性。
大家感兴趣的内容
12345678910
最近更新的内容版权申明：个人转载时请遵循"署名-非商业性使用-相同方式共享"创作共用协议，商业网站或未授权媒体不得复制内容。
&&&&&&&&&&&&&&&&盒子欢迎大家转载，但请署名/原文连接，转载时不得修改原文。如您想商用，请联系盒子。
发现自己建了个人工作室站点后，爱写东西了。以前都是解决完就完事不管了。为了改善体验，写了个浮动导航条跟随在浏览器左边，不过用下来几天发现很难受。之前是配合js弄的，虽然跟随页面定位了不过下拉页面后的过渡实在让我有点晕，我需要滚动页面后菜单原地不动。谷歌2页后无果····网上说的都不是我要的效果，几乎全部都是一样的文章说position:fixed定位在浏览器边缘。-_-||
昨晚逛淘宝时候看到个店铺有个快捷方式导航一直固定在页面的边缘而不是浏览器的边缘，因为随着浏览器的大小不一样。
如果用position:absolute绝对定位那样就没法在滚动条移动的时候固定在浏览器某个坐标上了。
css固定定位
琢磨半天没想到好的方法，在了解到position:fixed定位符合我的要求后，加入top，left的属性值，测试了百分比和像素的都无法达到理想要求，因为得考虑到不同分辨率显示器的用户。瞎搞腾一直无法让导航条菜单定位到网页的边缘。之后想了下百分比可以判断浏览器宽度自适应，那可以先定义到最中间后再使用margin属性不就可以精确定位了么！哎，怎么人老了思路都不活跃了。搞腾了这么多时间，不过总算是给解决了。(╯﹏╰)b
例如盒子工作室的相册模板页的菜单定义。
.image-nav{position: top:108right:50%; margin-right:480 background:#CB5D46; }
原理：position:固定定位，right:50%让属性绝对居中，margin-right:480px这个值就可以用来精确调节坐标了，以上示例大家可以自己修改数值。
解决了定位问题，大家记得还得考虑浏览器兼容性。ie6这个蛋疼的浏览器又在那搞腾了，ie6不能解析position: 属性。
所以我们需要解决兼容性问题让ie6也能达到同样效果。在你的css文件中增加以下定义。
兼容这个是网上搜来的，原理是让ie6模拟固定定位的效果。切忌一点以下语句兼容后，如果页面内有其它的定位样式那可能会造成错位等现象。当然最好页面能用浮动的就用浮动。
* html {overflow-y:}
* html body {height:100%;overflow-y:}
* html #floatMenu{position:}
Demo： 看左边的HOME按钮。
你可能还喜欢：
受益匪浅，之前就是这个问题一直没有解决，灰常感谢分享
You must be
to post a comment.