一、两列布局：左边固定宽度，右边自适应宽度

方法1：浮动布局

采用的是左边浮动，右边加上一个margin-left值，让他实现左边固定，右边自适应的布局效果

HTML:

CSS:

上面这种实现方法最关键之处就是自适应宽度一栏“div#content”的“margin-left”值要等于固定宽度一栏的宽度值，大家可以点击查看上面代码的DEMO

方法2：浮动和负边距实现

这个方法采用的是浮动和负边距来实现左边固定宽度右边自适应宽度的布局效果

HTML:

CSS:

二：等高布局(参见等高布局一文)

三：实现最小高度

上面的代码就轻松的帮我们实现了跨浏览器的最小高度设置问题。这样一来，我们可以交作业了，也完面了这个面试题的考试。为了让大家更能形象的了解

CSS之左定宽度右自适应宽度并且等高布局相关推荐

【CSS布局】已知布局元素的高度，写出三栏布局，要求左栏、右栏宽度各为300px，中间自适应。
CSS 的布局应该是 CSS 体系中的重中之重了,主要的布局方式有 table 表格布局, flex 盒子布局.float 浮动布局.position 定位布局,grid 网格布局,还有针对于移动端的 ...
关于某题左列定宽右列宽度自适应布局的学习
今天群里有人做题发了一道题,由于最近在学习flex布局,就不禁研究了起来... 题目如下: 已知HTML结构如下,以下哪些CSS可以实现左列定宽(100px)右列宽度自适应的布局? <div c ...
html怎么设置左侧区域宽度,【CSS】左侧定宽、右侧宽度自适应布局
又是一道前端的面试题,请实现页面布局,包括页头.内容区域.页脚三部分,其中内容区域为左右分栏,左栏定宽200px.右栏自适应宽度. 虽然是以前应用中碰到过的布局,但现场还是没写对,来重新做一下. 双列 ...
html 将盒子固定浏览器,浏览器默认css样式表 css之左盒子固定,右盒子自适应的一种实现方式...
浏览器默认css样式表在页面布局或者是列表布局中,我们经常出现一个场景:左边是固定宽度的盒子,右边自适应:div>label>Open... maoguiyou 2016年09月13日 ...
html怎样将四个li平均横放,css html 4图横向排列自适应宽度，多图横向排列 li横向 li自适应...
直接把苹果官网的抠出来给大家了,拿去happy吧! ,先上效果图: 横屏一排的效果: 把浏览器拉小的效果: 激动的代码来了: html> Apple (中国) - 官方网站 class=&quo ...
沫沫金：2014最新全浏览器兼容左列固定右列自适应宽度技巧大公开
做前端的人肯定会遇到经典的左列固定,右列自适应宽度的样式效果.这种想起来很简单做起来很麻烦的事情今天你有好方案了. --不要信那些什么左侧写固定宽度,右侧不用写宽度属性和浮动属性,浏览器自动就实现右列 ...
css网页屏幕自适应,css自适应宽度如何让网页自适应所有屏幕宽度
如何设置一个div的宽度为自适应宽度?div里只有文字.感情的戏,小编没演技.这场戏女主角是你而小编只是戏里的一个傻逼. #choise ul li a { display:block; border ...
CSS如何实现”右部宽度固定，左部自适应“的布局
吃过晚饭后,开始刷前端笔试题,却遇到了一道CSS难题--使用CSS实现左部自适应.右部固定宽度为200px的布局.当时第一眼看到题目时,以为只是一道很简单的题目.不就是定义两个左浮动的div,右部的宽 ...
CSS 圣杯布局升级版---多个固定宽度一个自适应宽度
1.一个div固定,一个div自适应宽度.两种情况,固定在左或者在右. HTML: <div class="box1"><div class="main ...

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

一、两列布局：左边固定宽度，右边自适应宽度

方法1：浮动布局

采用的是左边浮动，右边加上一个margin-left值，让他实现左边固定，右边自适应的布局效果

HTML:

CSS:

上面这种实现方法最关键之处就是自适应宽度一栏“div#content”的“margin-left”值要等于固定宽度一栏的宽度值，大家可以点击查看上面代码的DEMO

方法2：浮动和负边距实现

这个方法采用的是浮动和负边距来实现左边固定宽度右边自适应宽度的布局效果

HTML:

CSS:

二：等高布局(参见等高布局一文)

三：实现最小高度

上面的代码就轻松的帮我们实现了跨浏览器的最小高度设置问题。这样一来，我们可以交作业了，也完面了这个面试题的考试。为了让大家更能形象的了解

CSS之左定宽度右自适应宽度并且等高布局相关推荐

最新文章

热门文章