三栏布局,左右固定宽度,中间适配

一、html


二、css

左:

右:

左右分别设为绝对定位,position:absolute;分居左右两侧。left:0,左侧,right:0,右侧。均设top:0,是让三栏顶部齐平。

中:


中——外层

外层设宽度100%,左右pading的大小与左右两栏的宽度分别一致。外层设置box-sizing:border-box,是让pading的大小包含在指定尺寸的盒子里。例如:设宽度100px,pading-left:10;默认情况下,该盒模型宽度为:100+10;但设置box-sizing:border-box后,盒模型宽度为:100,pading就包含在设定的宽度内。

中——内层

内层块级元素(无行业元素和块级元素的概念可另外科普下)会继承父级元素除去pading的大小。实际的中间一栏宽度即外层宽度除去左右pading(左右pading也就是左右两栏的宽度)的宽度。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,814评论 1 92
  • 在百度前端技术学院2016的春季任务中,第一阶段系列任务作为基础练习,主要是让学员熟练html及css。其中,ta...
    夜来小星阅读 561评论 0 7
  • relative:生成相对定位的元素,通过top,bottom,left,right的位置相对于其正常位置进行定位...
    zx9426阅读 969评论 0 2
  • 1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素? 行内元素:和有他元素都在一行上,高度、行高及外...
    极乐君阅读 2,464评论 0 20
  • 室友来北京,终于可有落脚的地方了。来北京半年,没有一个朋友是有多无趣,以后我也可以和小颖子到处走走了 真好, 今天...
    权萌萌Stefanie阅读 197评论 0 0