html+css 常用布局
1.中间固定宽度,两侧自适应
1.1 flex布局
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html,body,div{
height: 100%;
}
.left {
background-color: #ccc;
flex:1;
} .middle {
background-color: #75cc23;
flex:0 0 400px;
} .right {
background-color: #cc3b38;
flex:1;
}
.con{
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<div class="con">
<div class="left"> </div>
<div class="middle"> </div>
<div class="right"> </div>
</div> </body> //也可以用这个样式
html,body,div{
height: 100%;
}
.left {
background-color: #ccc;
flex-grow:1;
} .middle {
background-color: #75cc23;
width:400px;
} .right {
background-color: #cc3b38;
flex-grow:1;
}
.con{
display: flex;
justify-content: center;
}
1.2 calc+float <!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html,body,div{
height: 100%;
}
.left,.right {
background-color: #ccc;
float: left;
width:calc((100% - 400px) / 2)
} .middle {
background-color: #75cc23;
width:400px;
float:left;
} .right {
background-color: #cc3b38; }
</style>
</head>
<body>
<div class="con">
<div class="left"> </div>
<div class="middle"> </div>
<div class="right"> </div>
</div> </body>
</html> 2.两边固定 中间自适应
2.1浮动布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title</title>
<style type="text/css">
.con div{
min-height: 200px;
}
.con .left{
float: left;
width: 300px;
background: #72f5ff;
}
.con .right{
float: right;
width: 300px;
background: #7aff73;
}
.con .middle{
background: #ff2d21;
} </style>
</head>
<body> <div class="con">
<div class="left"></div>
<div class="right"></div>
<div class="middle"> </div>
</div> </body>
</html>
2.2使用绝对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>绝对定位布局</title>
<style type="text/css">
.con div{
position: absolute;
min-height: 200px;
}
.con .left{
left: 0;
width: 300px;
background: red;
}
.con .right{
right: 0;
width: 300px;
background: blue;
}
.con .middle{
left: 300px;
right: 300px;
background: pink;
} </style>
</head>
<body> <div class="con">
<div class="left"></div>
<div class="middle"> </div>
<div class="right"></div>
</div> </body>
</html>
2.3 flex布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>flex</title>
<style type="text/css">
.con{
min-height: 200px;
display: flex;
}
.con .left{
width: 300px;
background: red;
}
.con .right{
width: 300px;
background: blue;
}
.con .middle{
flex-grow: 1;
background: #ffa861;
} </style>
</head>
<body> <div class="con">
<div class="left"></div>
<div class="middle">
</div>
<div class="right"></div>
</div> </body>
</html>
html+css 常用布局的更多相关文章
- CSS常用布局实现方法
CSS 布局对我来说,既熟悉又陌生.我既能实现它,又没有很好的了解它.所以想总结一下,梳理一下 CSS 中常用的一列,两列,三列布局等的实现方法.本文小白,仅供参考.但也要了解下浮动,定位等. 一.一 ...
- css常用布局
1.一列布局 html: <div class="header"></div> <div class="body">< ...
- css 常用布局
「前端那些事儿」③ CSS 布局方案 我们在日常开发中经常遇到布局问题,下面罗列几种常用的css布局方案 话不多说,上代码! 居中布局 以下居中布局均以不定宽为前提,定宽情况包含其中 1.水平居中 a ...
- CSS常用布局整理(二)
1-2-1单列变宽布局 side列定宽300px,content列变宽,尺寸是100%-300px.核心的问题就是浮动列的宽度应该等于“100% - 300px”,而CSS显然不支持这种带有减法运算的 ...
- CSS常用布局整理
固定宽度布局 1-2-1布局(浮动) <html xmlns="http://www.w3.org/1999/xhtml"> <head> <titl ...
- CSS常用布局方式-两列布局、三列布局
CSS基础 2.几种布局方式1)table布局 当年主流的布局方式,第一种是通过table tr td布局 示例: <style type="text/css"> ta ...
- CSS常用布局技巧 实例
末尾用省略号! white-space: nowrap; overflow: hidden; text-overflow: ellipsis; ######################## 两个i ...
- CSS常用布局学习笔记
水平居中-行内元素 如果是文字和图片这类的行内元素,则在其父级元素上加上样式:text-align:center; 水平居中-定宽块元素 div{ width:100px; margin:0 auto ...
- DIV+CSS常用网页布局技巧!
以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...
随机推荐
- Python基础教程(008)--第一个Python程序
前言: 学会第一个Python程序 了解Python2和Python3的区别 内容 执行Python程序的三种方式 解释器--Python.Python3 交互式-- ipthon 集成开发环境--P ...
- bash: service: command not found 错误的解决方法
service命令是要用ROOT用户来执行的,而出错的用户是用su root切换到ROOT用户下,这个命令没有也不会把环境带过去! 用如下命令就不会出错了:su - root 注意:su 后面是一个空 ...
- webservice 应用
一直以来,dashboard就会面临一个非常难堪的问题.就是刷新速度太慢了.它要连接query 来获取数据.而query每刷一次都需要时间.这是无可避免的结果.尽管它也是结果集,可还是比较慢.最近实践 ...
- Linux中grep命令,用或的关系查询多个字符串,正则表达式基础说明
请尊重版权:原文:https://blog.csdn.net/lkforce/article/details/52862193 使用 grep 'word1|word2' 文件名 这样的命令是不对的 ...
- linux SMbus错误
针对piix4_smbus ****host smbus controller not enabled的解决方法 查看文件并用超级权限修改内容 在末尾加入blacklist i2c——piix4 重启 ...
- 搭建RAID5(5块硬盘)过程并模拟一块磁盘损坏情况
首先:在配置RAID5之前我们先来了解一下它.RAID5,RAID是指独立磁盘冗余阵列,是把相同的数据存储在多个硬盘的不同地方的方法.通过把数据放在多个硬盘上,输入输出操作能以平衡的方式交叠,改良性能 ...
- java.lang -> Object
java.lang -> Object 是什么 Object 类是类层次结构的根,是 Java 中唯一一个没有父类的类,Java 中所有对象包括数组都继承了 Object 类中的方法. 重要方法 ...
- 判断是否英文字母或数字的C#正则表达式
private int IsDigitOrNumber(string str) { if(System.Text.RegularExpressions.Regex.IsMatch(str,@" ...
- 转 MySQL乐观锁和悲观锁
悲观锁(Pessimistic Lock) 顾名思义,就是很悲观,每次去拿数据的时候都认为别人会修改,所以每次在拿数据的时候都会上锁,这样别人想拿这个数据就会block直到它拿到锁.传统的关系型数据库 ...
- mybatis之增删改
前面三小节内容主要是针对查询操作进行讲解,现在对mybatis增删改进行演示. 由于每次建立工程比较复杂,可以参考第一节:mybatis入门来搭建一个简单的工程,然后来测试本节内容. 1.增 1.新增 ...