文档章节

网页布局基础(2)-横向俩列布局

iBazinga
 iBazinga
发布于 2016/12/04 16:52
字数 251
阅读 6
收藏 0

一、float属性

3个属性:left(左浮动) /  right(右浮动) /  none(不浮动)

特点:元素会左 / 右移,直至触碰容器为止。



就像容器边缘有磁铁吸引

*注意:设置了浮动的元素,依旧处于标准文档流中。

二、清除浮动影响的方法

     当元素设置浮动属性后,会对相邻的元素产生影响​。(相邻元素特指紧邻后面的元素)

1.clear属性:clear : both  (clear : left 或者 clear : float)
​​​                  ​​​​//   不清楚的情况下使用clear : both

2.同时设置width : 100% (或者固定宽度)+overflow : hidden ;

                 //​    紧邻元素使用方法1   ;  父级元素受影响使用方法2

三、横向俩列布局

方法:1.float属性 - 使纵向排列的块级元素,横向排列;

          2.margin属性 - 设置俩列之间的布局。



清除属性的注意点在不同情况下使用不同清除浮动的方法。

© 著作权归作者所有

共有 人打赏支持
iBazinga
粉丝 11
博文 128
码字总数 42533
作品 0
深圳
程序员
HTML5-基础篇-移动端适配 ( 二 )

一 : 科普一分钟 我们熟悉了在PC端进行开发网页,相对于移动设备需要有哪些调整呢,才能设计出符合各个场景和机型的完美移动网页.在众多APP 中大多嵌入H5页面开发,所以解决适配的问题很重要.其...

TianTianBaby223
2017/08/25
0
0
flutter笔记7:flutter页面布局基础,看完这篇就可以用flutter写APP了

不知不觉已经到了第7篇,然而很多萌新玩家可能还是不知道如何堆砌控件,像用CSS一样搭出漂亮的APP界面,我也一样,红红火火恍恍惚惚,直到今天含泪读完Flutter布局基础,仿佛打开了一个全新的...

燃烧的鱼丸
03/09
0
0
编写第一个响应式页面

本文为大家讲解如何使用一种科学的方法实现网页设计,从原理上搞清楚什么是响应式设计,并实现一个简易的响应式设计框架,以此为基础,编写出第一个响应式页面。 不知道现在大家还读村上春树...

凡尘里的一根葱
2015/11/24
60
0
Windows Phone开发(5):室内装修

为什么叫室内装修呢?呵呵,其实说的是布局,具体些嘛,就是在一个页面中,你如何去摆放你的控件,如何管理它们,你说,像不像我们刚搬进新住所,要“装修”一番?买一套什么样的茶几和杯具(...

junwong
2012/04/18
180
0
IOS用Tableview实现自定义柱形图(可左右滑动)

要用Tableview实现左右滑动的柱形图 其实并不难 首先咱们上下效果图: 这里是一些自定义参数: 我们分成几个步骤来实现 1.布局 2.绘制x和y轴的线 3.绘制y轴上的标签 4.绘制各个柱状图 5.绘制...

一个积极向上的码农
08/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

jquery创建类似于java的map

var map = {}; // Map map = new HashMap(); map[key] = value; // map.put(key, value); var value = map[key]; // Object value = map.get(key); var has = key in map; // boolean has = ......

SuperDabai
35分钟前
0
0
java大数据转换16进制转10进制

public static void main(String[] args) {String hex = "0xdbf3accc683297cf0000";BigInteger amount = new BigInteger(hex.substring(2), 16);System.out.println(amount);......

任梁荣
昨天
2
0
OSChina 周六乱弹 —— 目测我们程序员丁克的几率不大

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @真Skr小机灵鬼儿:8.13分享Jocelyn Pook/Russian Red的单曲《Loving Strangers》 《Loving Strangers》- Jocelyn Pook/Russian Red 手机党少...

小小编辑
昨天
9
3
TypeScript基础入门 - 函数 - 剩余参数

转载 TypeScript基础入门 - 函数 - 剩余参数 项目实践仓库 https://github.com/durban89/typescript_demo.gittag: 1.2.1 为了保证后面的学习演示需要安装下ts-node,这样后面的每个操作都能...

durban
昨天
1
0
OpenCV边缘检测算子原理总结及实现

1. 拉普拉斯算子 原理:是一种基于图像导数运算的高通线性滤波器。它通过二阶导数来度量图像函数的曲率。 拉普拉斯算子是最简单的各向同性微分算子,它具有旋转不变性。一个二维图像函数的拉...

漫步当下
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部