HTML的三种布局运用,html布局 左右固定，中间只适应，三种方法实现

html布局 左右固定，中间只适应，三种方法实现

使用自身浮动法定位

//html

使用自身浮动法定位

//style

#left_self,

#right_self {

width: 200px;

height: 100px;

background-color: #ffe6b8

}

#left_self {

float: left;

}

#right_self {

float: right;

}

#center_self {

margin: 0 210px;

height: 100px;

background-color: #a0b3d6

}

使用margin负值法进行布局

//html

使用margin负值法进行布局

//css

#wrap {

width: 100%;

height: 100px;

background-color: #fff;

float: left;

}

#wrap #center {

margin: 0 210px;

height: 100px;

background-color: #ffe6b8;

}

#left_margin,

#right_margin {

float: left;

width: 200px;

height: 100px;

background-color: darkorange

}

#left_margin {

margin-left: -100%;

background-color: lightpink

}

#right_margin {

margin-left: -200px;

}

使用flex

//html

//css

#box {

width: 100%;

display: flex;

height: 100px;

}

#left_box,

#right_box {

width: 200px;

height: 100px;

background-color: lightpink

}

#left_box {

margin-right: 10px;

}

#right_box {

margin-left: 10px;

}

#center_box {

flex: 1;

height: 100px;

background-color: lightgreen;

}

牢固的布局跟建房子打地基一样重要

css布局：左边固定宽度，右边自适应宽度或右侧固定，左侧自适应三种方法

方法一:浮动布局 这种方法我采用的是左边浮动,右边加上一个margin-left值,让他实现左边固定,右边自适应的布局效果 HTML Markup

(转载)Recyclerview | Intent与Bundle在传值上的区别 | 设置布局背景为白色的三种方法

用Recyclerview实现列表分组.下拉刷新以及上拉加载更多  http://www.jianshu.com/p/be62ce21ea57 Intent与Bundle在传值上的区别http://b ...

php 移动或重命名文件(图片)到另一目录下的方法有多种，这里只列出三种：

php 移动或重命名文件(图片)到另一目录下的方法有多种,这里只列出三种:       方法一:使用copy函数   格式:copy(source,destination)   将文件从 source ...

CSS实现导航条Tab的三种方法

前面的话   导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局   根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...

CSS实现导航条Tab切换的三种方法

前面的话   导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局   根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...

java 获取随机数的三种方法

方法1(数据类型)(最小值+Math.random()*(最大值-最小值+1))例:(int)(1+Math.random()*(10-1+1))从1到10的int型随数 方法2获得随机数for (i ...

三种方法为QLineEdit添加清除内容按钮

很多时候我们会发现输入的一长串内容不得不全部删除重新输入,这时比起一直按着退格键不放一个清除内容按钮更受欢迎. 今天我将介绍三种为QLineEdit添加清除内容按钮的方法,其中两种方法有较强的功能针对 ...

Ubuntu Linux系统三种方法添加本地软件库

闲着没事教教大家以Ubuntu Linux系统三种方法添加本地软件库,ubuntu Linux使用本地软件包作为安装源——转2007-04-26 19:47新手重新系统的概率很高,每次重装系统后都要经 ...

随机推荐

成为java高手的条件

世界上并没有成为高手的捷径,但一些基本原则是可以遵循的. 1.扎实的基础 数据结构.离散数学.编译原理,这些是所有计算机科学的基础,如果不掌握它们,很难写出高水平的程序.程序人人都会写,但当你发现写到 ...

JS 动态加载脚本 执行回调_转

关于在javascript里面加载其它的js文件的问题可能很多人都遇到过,但很多朋友可能并不知道怎么判断我们要加载的js文件是否加载完成,如果没有加载完成我们就调用文件里面的函数是不会成功的.本文讲解 ...

java对象的比较分析

关于对象的比较我们可以通过以下三种手段来实现 一.利用"=="比较引用 Java中,当比较简单类型变量时用"==",只要两个简单类型值相等即返回ture,否则返 ...

MySQL 执行计划里的rows

SQL> alter session set statistics_level=a ...

c# 即使服务又是可执行程序的代码实现

先看下代码 namespace UpdaterServer { class Program { static void Main(string[] args) { ) { ServiceBase[] ...

关于css的hack问题

取值:

nginx 防火墙、权限问题

1.nginx安装,配置完成之后,尝试访问没有响应,主机可以ping通,/var/log/nginx/access.log日志没有查到任何记录 解决方法:查看linux防火墙,关闭 命令:ipta ...

Win7/Win8/Win10下安装Ubuntu14.04双系统 以及常见问题

整理自网络. 1. 制作镜像 将ubantu镜像刻录到优盘(我使用UltraISO刻录,镜像下载地址:链接: http://pan.baidu.com/s/1bndbcGv 密码: qsmb) 2. ...

JSON in SQL Server 2016

JSON functions in SQL Server enable you to analyze and query JSON data, transform JSON to relational ...

Js把Json序列化为Java接受的对象。

服务器端 Java定义 data class role(var name: String = "", var remark: String = "") data ...