css这个东西,说难不难,说容易也不容易。我觉得最重要的还是经验的积累,正所谓的不积硅步,无以至千里。这一系列文章讲述几种css特殊布局的实现,也当作为自己做个备忘吧。
首先讲的是三列布局,左右两列宽度固定,中间一列宽度自适应
这个很好实现,左右两列分别左浮动和右浮动并给一个固定宽度,中间不浮动,也不设定宽度。这样基本就可以了。但为了兼容IE还必须做些工作。
看下代码结构:
效果为:
中间列要不要设置margin-left和margin-right ?
注意,中间那列需要把左右两个外边距分别设为左右两列的宽度,否则会有些问题。如下:
在谷歌、火狐等标准浏览器下是这样的(包括IE8+):
而在IE6、IE7中是这样的(图是在IE6下截的)
我们可以看到中间那列子元素的margin-left或margin-right的起点是不一致的,在IE6、IE7中,即使不给中间列设定margin-left和margin-right,它的子元素的左右外边距的起点仍然是在左右两列宽的的基础上的,就像是有margin-left和margin-right一样。所以为了各浏览器保持一致,中间那列还是设一个margin-left和margin-right为好。
IE6中的3px间隙bug
在上图的ie6截图中,我们看到各列之间有一条3px的间隔,这是只有IE6才有的问题。
如果中间那列的margin-left和margin-right都为0的话,则只要把左列的margin-right设为-3px,右列的margin-left设为-3px就行了。
但如果把中间列的margin-left和margin-right分别为左右两列的宽度时(上面已经说了,这也是必须这样做的),即使把左列的margin-right设为-3px,右列的margin-left设为-3px也还是没有效果。这时候还得把中间列的margin-left设为左列宽度-3px,margin-right设为右列宽度-3px才行。如下:
最终的代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>宽度自适应布局</title> <style> body,div{ margin:0; padding:0;} div{ height:200px; color:#F00;} .left{ float:left; width:100px; background:#00f; _margin-right:-3px;} .right{ float:right; width:100px; background:#0f0; _margin-left:-3px;} .center{ background:#333; margin:0 100px; _margin:0 97px;} </style> </head> <body> <div class="left">我是left</div> <div class="right">我是right</div> <div class="center">我是center</div> </body> </html>
两列布局,一列宽度固定,另一列自适应布局也是这个道理的。
相关推荐
居中是我们使用css来布局时常遇到的情况。使用css来进行居中时,有时一个属性就能搞定,本篇文章主要介绍了CSS布局奇淫技巧之--各种居中,有兴趣的可以了解一下。
12天学会DIV+CSS从理论到实践的教程,强烈推介。 第一天:选择什么样的DOCTYPE ...第八天:CSS布局入门 第九天:第一个CSS布局实例 第十天:自适应高度 十一天:不用表格的菜单 十二天:校验及常见的错误
呵呵 很好哦 css自适应宽度的按钮!
div宽度自适应布局(左边自适应)
使用css实现的三列布局,中间一列宽度固定大小,两边宽度要自适应。
Web前端期末大作业--绿色自适应医疗健康医院网页设计(HTML+CSS+JavaScript+)实现
div+css布局 三行三列 中间自适应
主要介绍了css实现右侧固定宽度 左侧宽度自适应,这种布局比较常见,博客园很多默认主题就是这种。一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域是主体内容区——相信把侧边栏搞成自适应的人很少吧...
div+css菜单导航布局自适应宽度,纯div+css
灰色全屏图片画廊自适应css模板_灰色 高斯模糊 图片 画廊 展示 宽屏 自适应.rar
百度前端开发练习总共有五题,中间自适应布局,自动补全,日历
CSS自适应宽度按钮! 很值得下载看看!资源免费,大家分享!!
div+css模板布局 右侧固定,左侧自适应
框架选用vue3.0 + vite +element-plus,自适应使用amfe-flexible、postcss-pxtorem插件,根据config的配置px会自动编译成rem;打包编译使用terser进行代码混淆;
这是一个纯CSS的下拉菜单,提供给CSS爱好者学习,应用不是非常广泛,如果作为导航栏请固定高度,否则会将页面玩挤下。
非常推荐的网页美化代码,个性化Select,长宽可自适应。
居中是我们使用css来布局时常遇到的情况。使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍。 注:本文所讲方法除了特别说明外,都...
在开发中,需要表格控件根据浏览器高度进行调整,固定表头,本文主要介绍了VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法,非常具有实用价值,需要的朋友可以参考下
最近做了个项目,其中有项目需求是需要div根据内容进行宽度自适应。下面小编给大家分享一段代码关于CSS 实现div宽度根据内容自适应 的相关知识,需要的朋友参考下
自适应一直就是都是前端开发的大难题,特别是现在越来越多的项目喜欢大屏展示,今天公司给我的项目便是一个可视化大屏的项目,而且宽高只告诉了大概是4000*2000,然后使用的Vue3进行开发,网上找了一下几乎都是Vue2...