文档章节

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

iBazinga
 iBazinga
发布于 2016/12/04 16:52
字数 251
阅读 6
收藏 0
点赞 0
评论 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
博文 127
码字总数 42315
作品 0
深圳
程序员
HTML5-基础篇-移动端适配 ( 二 )

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

TianTianBaby223 ⋅ 2017/08/25 ⋅ 0

flutter笔记7:flutter页面布局基础,看完这篇就可以用flutter写APP了

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

燃烧的鱼丸 ⋅ 03/09 ⋅ 0

编写第一个响应式页面

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

凡尘里的一根葱 ⋅ 2015/11/24 ⋅ 0

Windows Phone开发(5):室内装修

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

junwong ⋅ 2012/04/18 ⋅ 0

hacken/EasyReport

EasyReport A simple and easy to use Web Report System for java EasyReport是一个简单易用的Web报表工具,它的主要功能是把SQL语句查询出的行列结构转换成HTML表格(Table),并支持表格的跨...

hacken ⋅ 2017/08/14 ⋅ 0

Bootstrap~页面的布局

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

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

Android学习笔记(二) 布局方式的介绍

Android应用的开发的一项内容就是用户界面开发了。Android提供了大量功能丰富的UI组件。Android的界面是由布局和组件协同完成的。 Android所有UI组件都继承了View类,View类有一个重要的子类...

半夏alvin ⋅ 2014/03/05 ⋅ 0

android XML布局和子View按比例布局

首先按照程序的目录结构大致分析:   res/layout/ 这个目录存放的就是布局用的xml文件,一般默认为main.xml   res/values/ 这个目录存放的是一堆常量的xml文件   res/drawable/ 存放的...

程序袁_绪龙 ⋅ 2014/09/09 ⋅ 0

Android TableLayout表格布局

一:TableLayout是表格布局先上例子: 定义一个xml布局文件tablelayout.xml: 内容如下: <?xml version="1.0" encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com......

amigos_wu ⋅ 2012/06/07 ⋅ 4

没有更多内容

加载失败,请刷新页面

加载更多

下一页

ThreadPoolExecutor

ThreadPoolExecutor public ThreadPoolExecutor(int corePoolSize, int maximumPoolSize, long keepAliveTime, ......

4rnold ⋅ 昨天 ⋅ 0

Java正无穷大、负无穷大以及NaN

问题来源:用Java代码写了一个计算公式,包含除法和对数和取反,在页面上出现了-infinity,不知道这是什么问题,网上找答案才明白意思是负的无穷大。 思考:为什么会出现这种情况呢?这是哪里...

young_chen ⋅ 昨天 ⋅ 0

前台对中文编码,后台解码

前台:encodeURI(sbzt) 后台:String param = URLDecoder.decode(sbzt,"UTF-8");

west_coast ⋅ 昨天 ⋅ 0

实验楼—MySQL基础课程-挑战3实验报告

按照文档要求创建数据库 sudo sercice mysql startwget http://labfile.oss.aliyuncs.com/courses/9/createdb2.sqlvim /home/shiyanlou/createdb2.sql#查看下数据库代码 代码创建了grade......

zhangjin7 ⋅ 昨天 ⋅ 0

VS2015配置并运行汇编(一步一步照图做)【vs2017的链接在最后】

x64: TITLE Add and Subtract (AddSub.asm) ; This program adds and subtracts 32-bit integers. ; Last update: 2/1/02 ;.MODEL flat,stdcall x64 not su......

simpower ⋅ 昨天 ⋅ 0

一起读书《深入浅出nodejs》-node模块机制

node 模块机制 前言 说到node,就不免得提到JavaScript。JavaScript自诞生以来,经历了工具类库、组件库、前端框架、前端应用的变迁。通过无数开发人员的努力,JavaScript不断被类聚和抽象,...

小草先森 ⋅ 昨天 ⋅ 0

Java桌球小游戏

其实算不上一个游戏,就是两张图片,不停的重画,改变ball图片的位置。一个左右直线碰撞的,一个有角度碰撞的。 左右直线碰撞 package com.bjsxt.test;import javax.swing.*;import j...

森林之下 ⋅ 昨天 ⋅ 0

你真的明白RPC 吗?一起来探究 RPC 的实质

你真的明白RPC 吗?一起来探究 RPC 的实质 不论你是科班出身还是半路转行,这么优秀的你一定上过小学语文,那么对扩句和缩句你一定不陌生。缩句就是去除各种修饰提炼出一句话的核心,而不失基...

AI9o後 ⋅ 昨天 ⋅ 0

z-index设置失效?

今天碰到了一个问题,就是在给li设置提示框的时候,有用到遮罩效果,本来想把对应的出现在最顶层,可是不管将li设置的z-index值设为多大,li都没有出现在遮罩层之上。 我在网上查了z-index设...

IrisHunag ⋅ 昨天 ⋅ 0

CyclicBarrier、CountDownLatch以及Semaphore使用及其原理分析

CyclicBarrier、CountDownLatch以及Semaphore是Java并发包中几个常用的并发组件,这几个组件特点是功能相识很容易混淆。首先我们分别介绍这几个组件的功能然后再通过实例分析和源码分析其中设...

申文波 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部