布局之右侧自适应&&中间自适应

许久没有切图布局了,面试时一紧张就更忘记了喵....

一、左侧宽度固定 右侧宽度自适应

.left{float:left; width:200px; height:500px;}
.right{margin-left:200px; height:500px;}

  左侧也可绝对定位。

二、左右侧宽度固定 中间宽度自适应

.left{position:absolute;left:0;top:0; width:200px; height:500px;}
.right{position:absolute;right:0;top:0; width:200px; height:500px;}
.center{height:500px; margin:0 200px;}

  左右侧也可浮动。

时间: 2024-08-10 00:03:55

布局之右侧自适应&&中间自适应的相关文章

CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)

经常在工作中或者在面试中会碰到这样的问题,比如我想要个布局 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题. 下面我们分别来学习下,当然我也是总结下而已,有如以下网站源码方法: 一: 右侧固定宽度 左侧自适应  第一种方法:左侧用margin-right,右侧float:right  就可以实现.     HTML代码可以如下写:    <div class="box-left">        <a href="" targ

CSS 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题

一: 右侧固定宽度 左侧自适应  第一种方法:左侧用margin-right,右侧float:right  就可以实现.     HTML代码可以如下写:    <div>        <a href="" target="_blank">我是龙恩</a>    </div> <div>        <a href="" target="_blank">

两栏布局,右侧自适应

总结了一下两栏布局,右侧自适应的方法,欢迎指点和补充~~ 方法一:要求right中的子元素不能有固定宽度的(为了IE6),right要加overflow:hidden;           如果right中的内容有固定宽度的浮动元素时,right要加overflow:hidden;,否则当浏览器缩小到right宽度小于里面子元素的宽度时,在非IE67的浏览器中right里的子元素会下移,IE7正常显示:           不论加不加overflow,在IE6中,当浏览器缩小到right宽度小于

俩列布局(左边固定,右边自适应),等高布局,最小高度

俩列布局(左边固定,右边自适应): 1. <!DOCTYPE html> <html> <head> <title>俩列布局</title> <meta charset="utf-8"> <style type="text/css"> *{         margin: 0;         padding: 0;     } #left {         float: left

css经典布局——头尾固定高度中间高度自适应布局

今天说说一个经典布局:头尾固定高度中间高度自适应布局! 转文请标明 --- 出处:穆乙 http://www.cnblogs.com/pigtail/ 相信做过后台管理界面的同学,都非常清楚这个布局.最直观的方式是框架这个我不想多写费话,因为我们的重心不在这里.如果有不了解的同学可以百度.google.这里我不得不吐下槽!! 百度实在让我这个“粉丝”失望.就目前情况来说,百度已经完全轮为“有钱人排行榜”!再也不顾及用户的搜索需求了,因为主导地位实在是:不可撼动! 不相信的同学,可以亲身对比下B

实现一个三列布局(左右侧固定,中间自适应宽度)

html代码(第一二种方法): <div class="left">左侧固定区</div> <div class="right">右侧固定区</div> <div class="mid">中间自适应区</div> css代码: 第一种方法(定位): .left { position: absolute; top: 0; left: 0; width: 100px; heigh

两栏自适应布局,右侧div宽高不定

.main,.sitebar{ height: 300px; font: bolder 20px/300px "微软雅黑"; color: black; text-align: center; } .main{ width: 100%; float: left; } .main .content{ margin-left: 200px; background: red; } .sitebar{ width: 200px; float: left; margin-left: -100%;

CSS布局——左定宽度右自适应宽度并且等高布局

今天有位朋友一早从妙味课堂转来一个有关于CSS布局的面试题,需要解决,花了点时间写了几个DEMO,放上来与大家分享受.那么我们在看DEMO之前一起先来看看这个面试题的具体要求吧: 左侧固定宽,右侧自适应屏幕宽: 左右两列,等高布局: 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高) 要求不用JS或CSS行为实现: 仔细分析试题要求,要达到效果其实也并不是太难,只是给人感觉像有点蛋疼的问题一样.但是你仔细看后你会觉得不是那么回事: 左边固定,右边自适应布局,

圣杯布局(定宽与自适应)

圣杯布局小结 阅读目录 1. 从2个实际的需求说起 2. 圣杯布局的传统实现方法 3. 圣杯布局传统实现方法的一种变体 4. 圣杯布局的纯浮动实现 5. 圣杯布局的flex实现 7. 结束语 圣杯布局,很久之前就听过,但是一直都没详细了解过,最近因为做了一个项目,借鉴了薪人薪事这个公司的产品页面,才第一次用到这种布局方式.于是就花了点时间,测了下它实现常见分栏布局的代码,每段代码都非常简单,但布局效果很完美,比我以前用的方式好用不少.本文是对它实现方式的一些总结,希望可以把这种技术推荐给跟我之前