CSS布局

CntChen 发布于2019-08-02 14:27 / 3187人阅读

摘要：好记性不如烂笔头一两列布局部分左侧宽度固定，右侧宽度自适应关键点在于右的设置为左浮动的宽度。左浮动最后实现的效果左侧绝对定位右侧关键点左设置为绝对定位，使得左脱离文档流，类似于左浮动。

好记性不如烂笔头~~

一、两列布局

</>复制代码 
<--! HTML部分-->
    
        left
        right

左侧宽度固定，右侧宽度自适应

关键点在于：右div的margin-left设置为左浮动div的宽度。

左浮动 + margin-left

</>复制代码 
.content {
        width: 300px;
        height: 300px;
        background-color: white;
    }
    .left {
        float: left;
        width: 100px;
        height: 100px;
        background-color: #ffff80;
    }
    .right {
        height: 200px;
        margin-left: 100px;
        background-color: #80ff80;
    }

最后实现的效果：

2.左侧绝对定位+右侧margin-left
关键点：左div设置为绝对定位，使得左div脱离文档流，类似于左浮动。右侧div的margin-left设置为左div的宽度

</>复制代码 
.content {
            width: 300px;
            height: 300px;
            position: relative;//注意：父相子绝定位
            background-color: #ff80c0;
        }
        .left {
            width: 100px;
            height: 100px;
            position: absolute;
            left: 0;//可不用此行代码
            background-color: #ffff80;
        }
        .right {
            height: 200px;
            margin-left: 100px;
            background-color: #80ff80;
        }

还有一种设置绝对定位的方法：

</>复制代码 
.right {
            width: 200px;//这种情况要设置右div的宽度
            height: 200px;
            /* margin-left: 100px; */
            position: absolute;//将右div也设置成绝对定位，距离右侧的绝对定位
            right: 0;
            background-color: #80ff80;
        }

3.左浮动+margin负值

二、三列布局 三、flex弹性布局

云服务器 GPU云服务器 css布局 css布局教程学习css布局 div布局布局html

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

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

CSS及布局

摘要：经过半年的打磨，正式发布，主要是新增了一些常用组件，并使用命名，为接下来的微信小程序开发做好准备。这两种方式实现的瀑布流式布局均支持首屏和网页窗口大小改变时的列数自适应。主要是对于标准里的布局方式草案中的布局方式进行一些总结。一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看...

jaysun 2019-08-29 14:04 评论0 收藏0
前端-CSS3&H5

摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

xiaolinbang 2019-08-29 14:14 评论0 收藏0
CSS 常用布局在小程序中的应用

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

garfileo 2019-08-30 11:25 评论0 收藏0
CSS 常用布局在小程序中的应用

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

CoderDock 2019-08-30 15:44 评论0 收藏0
HTML-CSS

摘要：但是，从字体上来说雪碧图制作，使用以及相关，图文。由于采用了编译，所以能够保证在浏览器不支持标准布局的情况下，回滚到旧版本的，保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争，但是有一件事是确定的极大的提升了移动端一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 ...

xiaokai 2019-08-01 18:21 评论0 收藏0