文档章节

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

维他ViTa
 维他ViTa
发布于 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属性 - 设置俩列之间的布局。



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

© 著作权归作者所有

共有 人打赏支持
维他ViTa
粉丝 12
博文 135
码字总数 44057
作品 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
Bootstrap~页面的布局

Bootstrap作为支持响应式布局的一个前端插件,确实发挥着重要的作用,无论你是在手机,平板还是PC上浏览网页,都能达到不错的效果,这一切一切,都是bootstrap带给我们的! 今天主要说下页...

mcy247
2017/12/06
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

没有更多内容

加载失败,请刷新页面

加载更多

wordpress 汉化

在 wp-config.php 添加 define('WPLANG','zh_CN'); 在后台,更新 now ,即可。

james_laughing
27分钟前
1
0
Android JNI开发系列(十一) JNI 访问父类的构造方法和父类实例方法

JNI 访问父类的构造方法和父类实例方法 构造方法和父类实例方法 先看一段Java代码, Java package org.professor.jni.animal;import android.util.Log;public class Animal {protecte...

蔡小鹏
33分钟前
2
0
腾讯投资最高1.75亿美元正式进军菲律宾移动支付市场

菲律宾长途电话公司(PLDT)公司今日宣布,中国互联网巨头腾讯和私募股权公司KKR将获得该公司旗下金融科技公司Voyager Innovations的少数股权。 PLDT在一份声明中称:“腾讯和KKR最多将分别收...

linuxCool
今天
3
0
正则介绍及grep/egrep用法

10月16日任务 9.1 正则介绍_grep上 9.2 grep中 9.3 grep下 扩展 把一个目录下,过滤所有*.php文档中含有eval的行 grep -r --include="*.php" 'eval' /data 正则介绍 正则就是一串有规律的字符...

hhpuppy
今天
4
0
J2Cache 中使用 Lettuce 替代 Jedis 管理 Redis 连接

一直以来 J2Cache 都是使用 Jedis 连接 Redis 服务的。Jedis 是一个很老牌的 Redis 的 Java 开发包,使用很稳定,作者维护很勤勉,社区上能搜到的文章也非常非常多。算是使用范围最广的 Redi...

红薯
今天
21
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部