CSS+DIV自适应布局

sanyang 发布于2019-08-02 10:53 / 2593人阅读

摘要：自适应布局两列布局左右两侧，左侧固定宽度右侧自适应占满代码如下左右两侧，左侧固定宽度右侧自适应占满运行结果如下图两栏布局左定宽，右自动三列布局左中右三列，左右固定，中间自适应占满方法一左右浮动，中间，中间在最后代码如下左中右三列，

CSS+DIV自适应布局 1.两列布局（左右两侧，左侧固定宽度200px;右侧自适应占满） 代码如下：



    
        
        左右两侧，左侧固定宽度200px;右侧自适应占满

运行结果如下图：

两栏布局（左定宽，右自动）

float + margin

2.三列布局（左中右三列，左右200px固定，中间自适应占满） 方法一（左右浮动，中间 margin-left,margin-right，中间div在最后）

代码如下



    
        
        左中右三列，左右200px固定，中间自适应占满 方法一

运行结果如下图

方法二(左中右定位)：

代码如下



    
        
        左中右三列，左右200px固定，中间自适应占满 方法二

运行结果如下图：

3.上中下三行，头部，底部固定高200px，中间自适应占满 中间定位，底部定位

代码如下：



    
        
        上中下三行，头部，底部固定高200px，中间自适应占满

运行代码如下图：

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

代码如下：



    
        
        上下两部分，地下这个股东高度200px,如果上面的内容少，
        那么这个footer就固定在底部，如果内容多，就把footer往下挤
        
    
    
                
        sdsadas

        sdsadas

        sdsadas

        sdsadas
        sdsadas

        sdsadas

        sdsadas

        sdsadas

        sdsadas

        sdsadas

        sdsadas

        sdsadas

        sdsadas

运行结果如下图：

新手入门，请多多关照

GPU云服务器云服务器 div自适应 css自适应 css图片自适应 asp 自适应css

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

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

css中的那些布局

摘要：张鑫旭老师的博客是左边流式布局，右边固定宽度左浮动因为浮动会导致元素脱离文档流，所以下面的元素会占据浮动元素原来的位置。代码左浮动实现两列布局绝对定位实现两列布局这个原理类似浮动，因为绝对定位会脱离文档流，只需要设置右的就能实现布局。因为最近心血来潮，就总结了一下css中的几种常见的多列布局。两列自适应布局两列自适应布局算是css布局里面最基础的一种布局了，不少网站在使用。这...

liangzai_cool 2019-08-29 11:00 评论0 收藏0
css中的那些布局

摘要：张鑫旭老师的博客是左边流式布局，右边固定宽度左浮动因为浮动会导致元素脱离文档流，所以下面的元素会占据浮动元素原来的位置。代码左浮动实现两列布局绝对定位实现两列布局这个原理类似浮动，因为绝对定位会脱离文档流，只需要设置右的就能实现布局。因为最近心血来潮，就总结了一下css中的几种常见的多列布局。两列自适应布局两列自适应布局算是css布局里面最基础的一种布局了，不少网站在使用。这...

phodal 2019-08-01 15:30 评论0 收藏0
css上中下布局自适应中间，左右布局自适应左侧display: table

摘要：在我们经常用到固定头部和底部，自适应中间部分，或者固定左侧，自适应右侧等。在网上看了很多方法，一般都是通过绝对定位完成，具体可以网上去搜，这样可以完成上中下的布局，但是这次基础上再做左右布局浮动会出现问题，具体什么问题我没有深究。在css我们经常用到固定头部和底部，自适应中间部分，或者固定左侧，自适应右侧等。在网上看了很多方法，一般都是通过绝对定位完成，position: absol...

Baaaan 2019-08-30 13:00 评论0 收藏0
CSS+DIV自适应布局

摘要：自适应布局两列布局左右两侧，左侧固定宽度右侧自适应占满代码如下左右两侧，左侧固定宽度右侧自适应占满运行结果如下图两栏布局左定宽，右自动三列布局左中右三列，左右固定，中间自适应占满方法一左右浮动，中间，中间在最后代码如下左中右三列， CSS+DIV自适应布局 1.两列布局（左右两侧，左侧固定宽度200px;右侧自适应占满）代码如下：左右...

Cruise_Chan 2019-08-30 15:54 评论0 收藏0
常见的面试问题：【CSS】已知高度，写出三栏布局

摘要：问题已知高度，写出三栏布局，其中左右两栏宽度各位，中间自适应回答效果示例解决方案浮动绝对定位弹性布局表格布局网格布局。方案二绝对定位将和的都设置脱离文档流，给的设置左右两边距离即左右两边盒子的实际宽度。问题：已知高度，写出三栏布局，其中左右两栏宽度各位200px，中间自适应showImg(https://segmentfault.com/img/bVbu6r1?w=300&h=1...

MobService 2019-08-02 15:33 评论0 收藏0