文档章节

CSS 几种常用自适应布局

施长成
 施长成
发布于 2015/03/15 20:53
字数 417
阅读 52
收藏 1

通过阅读和实践,我对几种常用的布局样式有了一定的了解,也稍微总结了一下原理,若有不对请大家纠错。谢谢

我理解的【两列布局】左边固定和右边自适应,或者右边固定左边自适应的原理是:

1.设置固定区域的宽度

2.设置自适应的区域的宽度为100%

3.设置他们向左或者向右浮动。

4.固定区域设置它的 外边距为负数 使 自适应区域能够和固定区域同在一行。

5.虽然自适应区域与固定区域同一行 但是它宽度其实是父级的宽度,所有自适应区域需要设置一个子区域,并且也需要让子区域中的内容能够正确显示在可视范围内。

【三列布局 两边固定 中间自适应

    1.我们可以把中间和右边看成一个 右边固定,左边自适应的布局。

    2.设置左边区域的宽度和浮动

    3.因为左边的区域就应该是文档流中的区域,但是我们设置了浮动,导致左边区域已经脱离了文档流,所有我们应该使用 position:relative 使左边区域还依旧显示在文档流的位置中。

    4.给自适应区加一个子区域,并设置子区域的显示区域。


学习网站 http://nec.netease.com/library/category/#grid

我的代码: https://git.oschina.net/scc/MyTestDemo.git


© 著作权归作者所有

上一篇: html DOM加载顺序
施长成
粉丝 6
博文 66
码字总数 24419
作品 0
浦东
后端工程师
私信 提问
「前端那些事儿」③ CSS 布局方案

我们在日常开发中经常遇到布局问题,下面罗列几种常用的css布局方案 话不多说,上代码! 居中布局 以下居中布局均以不定宽为前提,定宽情况包含其中 1、水平居中 a) inline-block + text-ali...

zwwill木羽
2018/10/30
0
0
布局神器(一)display:table-cell

display:table-cell 页面布局是HTML+CSS的一个重点,除了常见的几种布局外,如:float、position: absolute等等;还有一些功能强大且好用的布局方式,本文就display:table-cell做学习总结...

即将离
2016/07/17
0
0
display:table-cell介绍

[图片上传失败...(image-2969e4-1516190383083)] 页面布局是HTML+CSS的一个重点,除了常见的几种布局外,如:float、position: absolute等等;还有一些功能强大且好用的布局方式,本文就dis...

bug_killer
2018/01/17
0
0
前端页面如何适应不同屏幕分辨率常用做法

1、根据几个浏览器分辨率统计平台得到数据现在使用1200分辨率以下用户极少,但我们CSS布局时仍然需要至少考虑1024px分辨率用户 2、使用css media 属性针对不同的屏幕加载不同的css 3、好用的...

黑魔法
2018/10/31
0
0
网页瀑布流效果实现的几种方式

前言 like a mountain that is in our path,wo cannot complain that it is there,we simply have to climb it 起由 最近,在搭建个人博客时,其中的Demo展示页面想用瀑布流形式展现,发现现有...

撒网要见鱼
2016/11/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Android双向绑定原理简述

Android双向绑定原理简述 双向绑定涉及两个部分,即将业务状态的变化传递给UI,以及将用户输入信息传递给业务模型。 首先我们来看业务状态是如何传递给UI的。开启dataBinding后,编译器为布局...

tommwq
今天
2
0
Spring系列教程八: Spring实现事务的两种方式

一、 Spring事务概念: 事务是一系列的动作,它们综合在一起才是一个完整的工作单元,这些动作必须全部完成,如果有一个失败的话,那么事务就会回滚到最开始的状态,仿佛什么都没发生过一样。...

我叫小糖主
今天
6
0
CentOS 的基本使用

1. 使用 sudo 命令, 可以以 root 身份执行命令, 必须要在 /etc/sudoers 中定义普通用户 2. 设置 阿里云 yum 镜像, 参考 https://opsx.alibaba.com/mirror # 备份mv /etc/yum.repos.d/CentO...

北漂的我
昨天
3
0
Proxmox VE技巧 移除PVE “没有有效订阅” 的弹窗提示

登陆的时候提示没有有效的订阅You do not have a valid subscription for this server. Please visit www.proxmox.com to get a list of available options. 用的是免费版的,所以每次都提示......

以谁为师
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部