左侧固定,右侧宽度自适应

原创 2015年11月20日 21:34:22

这里用到两种方法实现实现一个两列布局,其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化 。

每个例子我都用两幅图对比效果。黄色部分的宽度就是大框架的宽度,我们可以看到红色区域不发生改变,红色区域随着黄色区域宽度的改变而改变。
html部分

<div class="box1">
    <div class="divA">DIVA</div>
    <div class="divB">DIVB</div>
    <div class="divC">DIVC</div>
</div>
<div class="box2">
    <div class="divA">DIVA</div>
    <div class="divB">DIVB</div>
    <div class="divC">DIVC</div>
</div>
  1. 方法1
    红色部分float:left;蓝色部分margin-left:150px;150px是红色部分的宽度。
*{margin:0;padding:0;}
.box1{width:500px;margin-left:100px;}
.box2{width:600px;margin-left:100px;margin-top:20px;}
.divA{width:150px;background:red;text-align:center;float:left;}
.divB{margin-left:150px;background:blue;text-align:center;}
.divC{background:yellow;text-align:center;}

效果图
这里写图片描述

注意:当蓝色部分不设置它的margin-left时;红色部分的宽度将会是黄色部分的宽度,然后把蓝色部分的内容挤到右边了。但是红色部分还会向效果图里那样,不过是把蓝色部分给遮挡了,当红色的高度比蓝色高度要高时,我们会发现这种效果:

这里写图片描述
2. 方法2
大框架box部分定位为position:relative;红色部分采用的时position:absolute;这两句话使得红色部分可以相对于大框架box绝对定位;所以设定left:0px;紧贴着大框架box;蓝色部分任然是marign-left:150px;如果省略了这句话,效果将和方法1中注意部分一样,这里就不分析了。

*{margin:0;padding:0;}
.box1{width:500px;margin-left:100px;position:relative;}
.box2{width:600px;margin-left:100px;
margin-top:20px;position:relative;}
.divA{width:150px;background:red;position:absolute;
left:0px;text-align:center;}
.divB{background:blue;margin-left:150px;
text-align:center;}
.divC{background:yellow;text-align:center;}

效果图:
这里写图片描述

版权声明:本文为博主原创文章,未经博主允许不得转载。

左右布局:左边定宽、右边自适应

转自: http://zhoukekestar.github.io/notes/2017/06/07/interview-answers.html absolute + padding ...

CSS左侧固定宽 右侧自适应(兼容所有浏览器)

方法一、浮动布局 HTML Left sidebar Main Content CSS Code *{margin: 0;padding: 0;} #left { float: left;...

css实现左边定宽右边自适应的两列布局5种方法

在项目实践中不乏有需要两列式布局,左侧固定右侧自适应是比较常见的布局方式,现在我就来总结一下我自己所知道的5种方法。 html代码结构: 我是左边 ...

用两种不同的方法来实现一个两列布局,其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化

box1 box2 box3 box4 方法一的css部分: #one{ padding-left: 300px; ...

关于利用css 实现右侧固定 左侧自适应布局的解决方案

最近遇到要求实现 右侧大小固定,左侧自适应的问题 ,根据亲身实现,现总结如下: 1.我们首先看一下左边固定 右边自适应的情况   html :    我在左边             我在右边  cs...
  • alonia
  • alonia
  • 2016年03月22日 20:05
  • 1675

CSS 两列布局---左侧固定,右侧自适应

前端一个小面试题总结如下: 1、方法一,高度100%,左侧float,右侧自动宽度(会自动占满剩余宽度)。 2、方法二,绝对定位absolute,使用方法一的HTML结构,左侧绝对定位,拉出文档流...
  • osdfhv
  • osdfhv
  • 2016年08月11日 09:30
  • 2554

实现如下页面布局。核心区域左侧自适应,右侧固定宽度 200px

原题目:牛客网-阿里巴巴2016前端开发工程师笔试(一):10题 要求自适应,那一开始就不能把左侧content的宽度给设死了。尝试了几次一开始思维定式就先从左至右写吧,于是 .content...

【前端攻城狮之路】CSS两列布局——右侧固定宽度、左侧自适应

做了一道猫厂很经典的前端笔试题,解决了一直以来在两列布局的认识上思考太少的毛病。 题目要求是右侧aside固定宽度200px,左侧content自适应。 本来直接用float,发现aside总是会...

css实现右侧固定宽度,左侧宽度自适应

反过来也可以:左侧宽度固定,右侧自适应。不管是左是右,反正就是一边宽度固定,一边宽度自适应。 这种布局比较常见,博客园很多默认主题就是这种。一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应...

css实现右侧固定宽度,左侧宽度自适应

反过来也可以:左侧宽度固定,右侧自适应。不管是左是右,反正就是一边宽度固定,一边宽度自适应。 这种布局比较常见,博客园很多默认主题就是这种。一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:左侧固定,右侧宽度自适应
举报原因:
原因补充:

(最多只允许输入30个字)