有关于css的四种布局

Steve_Wang_ 发布于2019-08-30 15:54 / 601人阅读

摘要：四种布局左右两侧，左侧固定宽度，右侧自适应占满。上中下三行，头部高，底部高，中间自适应占满。上下两部分，底下这个固定高度，如果上面的内容少，那么这个就固定在底部，如果内容多，就把挤着往下走。代码如下布局若有错误请及时通知

四种布局

（1）、左右两侧，左侧固定宽度200px，

右侧自适应占满。

（2）、左中右三列，左右个200px固定，中间自适应占满。

（3）、上中下三行，头部200px高，底部200px高，中间自适应占满。

（4）、上下两部分，底下这个固定高度200px，如果上面的内容少，那么这个footer就固定在底部，如果内容多，就把footer挤着往下走。

一、第一种

图片如下：（左右两侧，左侧固定宽度200px，右侧自适应占满）

代码如下：



    
        
        布局1

.first,.second{height:100px;}
.first{
    width:200px;
    background-color:yellow;
    float:left;
    
}
.second{
    
    background-color:red;
    position:absolute;
    right:0px;
    left:200px;
    width:100%;
}x

二、第二种

图片如下：（上中下三行，头部200px高，底部200px高，中间自适应占满）

代码如下：



    
        
        布局2

.left,.center,.right{height:400px;}
.left{
    width:200px;
    background-color:yellow;
    float:left;
    
}
.center{
    
    background-color:red;
    position:absolute;
    right:200px;
    left:200px;
    
}
.right{
    width:200px;
    float:right;
    background-color:green;
    
}

三、第三种

图片如下：上中下三行，头部200px高，底部200px高，中间自适应占满

代码如下：



    
        
        布局3

body{margin:0px;}

.top{
    width:100%;
    height:200px;
    position:absolute;
    background:red;
}    
.center{
    width:100%;
    
    position:absolute;
    background:blue;
    top:200px;
    bottom:200px;
}    
.bottom{
    width:100%;
    height:200px;
    position:absolute;
    bottom:0px;
    
    background:black;
}

四、第四种

图片如下：上下两部分，底下这个固定高度200px，如果上面的内容少，那么这个bottom就固定在底部，如果内容多，就把bottom挤着往下走。

代码如下：



    
        
        布局4
        
    
    
    
    
    aijefoaiejfoaiejfaio

    ........

html{
    height:100%;
}
body{
    margin:0px;
    min-height:100%;
    position:relative;
    
    background:red;
}

.top{
    padding-bottom:300px;
    
}

.bottom{
    position:absolute;
    width:100%;
    height:200px;
    background:black;
    bottom:0px;
    left:0px;
}

若有错误请及时通知

云服务器 GPU云服务器 activity的四种状态数据迁移的四种方法对数据仓库分析的四种方式 java中线程的四种状态

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

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

有关于css的四种布局

摘要：四种布局左右两侧，左侧固定宽度，右侧自适应占满。上中下三行，头部高，底部高，中间自适应占满。上下两部分，底下这个固定高度，如果上面的内容少，那么这个就固定在底部，如果内容多，就把挤着往下走。代码如下布局若有错误请及时通知四种布局（1）、左右两侧，左侧固定宽度200px，右侧自适应占满。（2）、左中右三列，左右个200px固定，中间自适应占满。（3）、上中下三行，头部200p...

khs1994 2019-08-02 10:55 评论0 收藏0
CSS三栏布局的四种方法

摘要：浮动代码如下注意元素次序代码如下左栏左浮动中间自适应右栏右浮动这种方式代码足够简洁与高效，也容易理解后记四种方法其实只有圣杯布局和双飞翼布局较难理解，但实际上理解了圣杯布局，双飞翼布局自然就理解了。前言总括：不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的，也许你不知道什么事三栏布局什么是两栏布局但实际已经在用，或许你知道三栏布局的一种或两种方法，但实际操作中也只会依赖那...

RobinQu 2019-08-30 13:14 评论0 收藏0
vue移动端h5页面根据屏幕适配的四种方案

摘要：在移动端页面当中，其中适配是经常会遇到的问题，这块主要有死个方法可以适用。目前全网找或者是尝试来看，确实没有一个十全十美的适配的解决方案，只能不断在实践应用当中慢慢填坑最近做了两个关于h5页面对接公众号的项目，不得不提打开微信浏览器内置地图导航的功能确实有点恶心。下次想起来了的话，进行总结分享一下如何处理。在vue移动端h5页面当中，其中适配是经常会遇到的问题，这块主要有死个方法可以适用。 ...

番茄西红柿 2019-04-23 13:18 评论0 收藏0
css清除浮动常用的四种方法实现

摘要：用这种方法清除浮动，会为文档中增加不必要的结构，不推荐。可以包含浮动元素，所以能实现撑起高度的效果。以上是常用的几种方法，可以根据场景的不同选择适合的。在页面布局中经常会用到浮动和清除浮动的操作，但之前是知其然而不知其所以然，看过多篇文章后，有了一些深入的了解，特整理下来！浮动的目的：最初设计浮动的目的是为了实现文字等内容可围绕图像显示，后来发现浮动方便布局，所以支持浮动任何元素...

iliyaku 2019-08-29 16:14 评论0 收藏0
茴字的四种写法—移动适配方案的进化

摘要：是阿里团队开发的前端适配方案，也是用的的方法。那么第一种方法其实已经能解决前端适配问题了，为什么阿里还要开发一个呢在第一种方法中，时没有任何问题，但是在或者更高的手机屏幕上，因为物理像素的增加，存在小于的显示空间。话说我刚工作的时候，就开始用rem了，过了没多久，接触到了flexible，系统化且支持iOS的retina屏迅速征服了我，最近又看到了大漠大神的vw。所以本文想完成一篇一...

canger 2019-08-22 16:12 评论0 收藏0