资讯专栏INFORMATION COLUMN

css 布局2

yanest / 1531人阅读

摘要:一自适应布局两栏布局左定宽,右自动代码如下两栏布局左定宽,右自动效果图三列布局两侧定宽,中间自适应代码如下左中右三列左右,中间自适应效果图三列布局上下定宽,中间自适应代码如下上中下三行上下,中间自适应效果图上下两部分

一、css+div自适应布局 1.两栏布局(左定宽,右自动)

float + margin

代码如下:





    
    两栏布局(左定宽,右自动)
    


效果图:

2.三列布局(两侧定宽,中间自适应)

position+ margin

代码如下:




    
    左中右三列左右200,中间自适应
    


效果图:

2.1三列布局(上下定宽,中间自适应)

position + position

代码如下:





    
    上中下三行上下200,中间自适应
    


    

效果图:

3.上下两部分,底下这个固定高度200px,如果上面的内容少,那么这个footer就固定在底部,如果内容多,就把footer挤着往下走

position + margin

代码如下:




    
    上下两部分,底部固定高度200,如果上面内容少,底部固定,多的话挤着底部往下走
    


        
你好,点个赞吧!

效果图:

新手入门,请大佬们多多指教!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/116880.html

相关文章

  • 浏览器内核之 CSS 解释器和样式布局

    摘要:书接上文浏览器内核之解释器和模型本文剖析的解释器和样式布局。根据生成解释器类。而后将解释后的信息设置到元素的属性的样式中,然后设置标记表明该元素需要重新计算样式,并触发重新计算布局。 showImg(https://segmentfault.com/img/remote/1460000016215814); 微信公众号:爱写bugger的阿拉斯加如有问题或建议,请后台留言,我会尽力解决...

    _Dreams 评论0 收藏0
  • 浏览器内核之 CSS 解释器和样式布局

    摘要:书接上文浏览器内核之解释器和模型本文剖析的解释器和样式布局。根据生成解释器类。而后将解释后的信息设置到元素的属性的样式中,然后设置标记表明该元素需要重新计算样式,并触发重新计算布局。 showImg(https://segmentfault.com/img/remote/1460000016215814); 微信公众号:爱写bugger的阿拉斯加如有问题或建议,请后台留言,我会尽力解决...

    xiangchaobin 评论0 收藏0
  • 如何使用Flexbox和CSS Grid,实现高效布局

    摘要:代码如下页面内容样式接下来,将侧边栏和主内容区域使用一个包含起来。列和行布局部分横跨所有的列。也可以使用简写,起始值和结束值位于同一行上,并用斜杠分隔。设计方法总结以上的布局设计中,使用了来进行整体布局以及设计中的非线性部分。 CSS 浮动属性一直是网站上排列元素的主要方法之一,但是当实现复杂布局时,这种方法不总是那么理想。幸运的是,在现代网页设计时代,使用 Flexbox 和 CSS...

    eternalshallow 评论0 收藏0
  • CSS 常用布局在小程序中的应用

    摘要:常用布局在小程序中的应用所有布局的根本都是个基本概念定位浮动外边距操纵我们其他的布局实现方式,都是基于正常的文档流来进行的。具体实现,可以使用微信小程序的单位,以及使用定位浮动布局来实现。 CSS 常用布局在小程序中的应用 所有css布局的根本都是3个基本概念:定位、浮动、外边距操纵 我们其他的布局实现方式,都是基于正常的文档流来进行的。所以我们先来看看什么是正常的文档流。 正常文...

    garfileo 评论0 收藏0
  • CSS 常用布局在小程序中的应用

    摘要:常用布局在小程序中的应用所有布局的根本都是个基本概念定位浮动外边距操纵我们其他的布局实现方式,都是基于正常的文档流来进行的。具体实现,可以使用微信小程序的单位,以及使用定位浮动布局来实现。 CSS 常用布局在小程序中的应用 所有css布局的根本都是3个基本概念:定位、浮动、外边距操纵 我们其他的布局实现方式,都是基于正常的文档流来进行的。所以我们先来看看什么是正常的文档流。 正常文...

    CoderDock 评论0 收藏0
  • 现代CSS进化史

    摘要:第一个主流的预处理器是年发布的,它提供了一个新的更简洁的语法缩进代替大括号,没有分号等等,同时增加了一些缺失的高级特性,像变量工具方法还有计算。 英文:https://medium.com/actualize-...编译:缪斯 showImg(https://segmentfault.com/img/bV3vCJ?w=1129&h=735); CSS一直被web开发者认为是最简单也是最...

    msup 评论0 收藏0

发表评论

0条评论

yanest

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<