实现三个div，固定左右两边的div宽为200，中间的div宽度自适应的四种方法
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>实现三个div，固定左右两边的div宽为200，中间的div宽度自适应的四种方法</title>
<style type="text/css">
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
color: #fff;
text-align: center;
line-height: 100px;
} .clear:after {
content: "";
display: block;
height: 0;
clear: both;
}
/*float法*/ .left {
float: left;
width: 200px;
height: 100px;
background: Red;
} .right {
float: right;
width: 200px;
height: 100px;
background: green;
} .center {
margin-left: 200px;
margin-right: 20px;
height: 100px;
background: blue;
}
/*position*/ .position {
position: relative;
margin-bottom: 100px;
} .left2 {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 100px;
background: Red;
} .right2 {
position: absolute;
right: 0;
top: 0;
width: 200px;
height: 100px;
background: green;
} .center2 {
position: absolute;
left: 200px;
right: 200px;
top: 0;
background: blue;
}
/*table*/ .table {
display: table;
width: 100%;
} .table .child {
display: table-cell;
} .left3 {
width: 200px;
height: 100px;
background: Red;
} .right3 {
width: 200px;
height: 100px;
background: green;
} .center3 {
height: 100px;
background: blue;
}
/*flex*/ .flex {
display: box;
display: -webkit-box;
display: -moz-box;
} .left4 {
width: 200px;
height: 100px;
background: Red;
} .right4 {
width: 200px;
height: 100px;
background: green;
} .center4 {
box-flex: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
background: blue;
}
</style>
</head> <body>
<div class="clear">
<div class="left">float法</div>
<div class="right">float法</div>
<div class="center">float法</div>
</div>
<br />
<div class="position clear">
<div class="left2">position法</div>
<div class="right2">position法</div>
<div class="center2">position法</div>
</div>
<br />
<div class="table clear">
<div class="left3 child">table法</div>
<div class="center3 child">table法</div>
<div class="right3 child">table法</div>
</div>
<br />
<div class="flex clear">
<div class="left4 child">flex法</div>
<div class="center4 child">flex法</div>
<div class="right4 child">flex法</div>
</div>
</body> </html>
效果图
实现三个div，固定左右两边的div宽为200，中间的div宽度自适应的四种方法的更多相关文章
- css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）
原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...
- CSS两列布局——左侧宽度固定，右侧宽度自适应的3种方法
1.左侧绝对定位法 直接看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- 假设高度已知，请写出三栏布局，其中左栏、右栏各为300px，中间自适应的五种方法
假设高度已知,请写出三栏布局,其中左栏.右栏各为300px,中间自适应的五种方法 HTML CSS 页面布局 题目:假设高度已知,请写出三栏布局,其中左栏.右栏各为300px,中间自适应 <!D ...
- css布局两边固定中间自适应的四种方法
第一种:左右侧采用浮动 中间采用margin-left 和 margin-right 方法. 代码如下: <div style="width:100%; margin:0 auto;& ...
- 让一个图片在div中居中（四种方法）
第一种方法: <div class="title"> <div class="flag"></div> <div cl ...
- Css三栏布局自适应实现几种方法
Css三栏布局自适应实现几种方法 自适应实现方法我们可以从三个方法来做,一个是绝对定位 ,自身浮动法 和margin负值法了,下面我们一起来看看这三个例子吧,希望例子能帮助到各位同学. 绝对定位法三栏 ...
- css+div制作圆角矩形的四种方法
圆角矩形一向是设计师最倾心的一种设计,因为他们可以让整个网页生动起来,不那么死板,所以,作为一个优秀的网页设计师,学会一种或多种编辑圆角矩形的方法是必不可少的,而且圆角矩形应用范围极广,一个网页内的所 ...
- CSS三栏布局的四种方法
总括: 不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的,也许你不知道什么事三栏布局什么是两栏布局但实际已经在用,或许你知道三栏布局的一种或两种方法,但实际操作中也只会依赖那某一种方法,本文具 ...
- CSS系列，三栏布局的四种方法
三栏布局.两栏布局都是我们在平时项目里经常使用的,今天我们来玩一下三栏布局的四种写法,以及它的使用场景. 所谓三栏布局就是指页面分为左中右三部分然后对中间一部分做自适应的一种布局方式. 1.绝对定位法 ...
随机推荐
- LUOGU P2964 [USACO09NOV]硬币的游戏A Coin Game
题目描述 Farmer John's cows like to play coin games so FJ has invented with a new two-player coin game c ...
- HR招聘_(三)_招聘方法论（招聘途径及流程）
1.招聘途径 网络招聘:企业官网,招聘网站,微信,论坛等. 校园招聘:学校信息栏海报,学校组织招聘会,校企业联合专场. 现场招聘会: 专场招聘会,人才市场招聘会. 猎头公司:猎头(年薪高于350K), ...
- web前端学习常用网址记录
jetbrains下载各种软件和试用 www.jetbrains.com www.jetbrains.com/idea php服务器下载 php文档查询 php.net webAPI网站(各种教程文档 ...
- TypeScript类型检查机制
类型推断 指不需要指定变量的类型,TS编译器可以根据某些规则自动推断出类型. 什么时候会有类型推断? 声明变量时没有指定类型 函数默认参数 函数返回值 ...... let a; // 这时自动推断为 ...
- 第一周<单元一聚类>
K-means 聚类算法 初始随机选择 而后不断更新 kmeans 应用 省份归类 调用kmeans方法所需要的参数 n_clusters 指定的聚类中心 init 初始聚类中心的初始化方法 默认k- ...
- Python 使用BeautifulSoup模块抽取数据
- 读JS高性能总结——DOM编程（一）
DOM是一个与语言无关的API,它在浏览器中的借口却是用JS来实现的. 浏览器通常会把DOM和JS独立实现. 在IE中,JS的实现名是JScript,位于jscript.dll文件中,DOM实现则是m ...
- HZOI20190714 T3建造游乐场
先放作者的正解: 先说g吧,有i个点的话,在其中i-1个点中有$C_{i-1}^{2}$种边,每个边有选和不选两种情况.如果度不是偶数呢?用剩下那个点给他连上呗.如果剩下那个点度数不是偶数呢?这是不可 ...
- Spring_使用(JDBC)
Spring_对JDBC的支持 使用JdbcTemplate更新数据库 导入jar包 创建applicationcontext.xml <?xml version="1.0" ...
- day39-Spring 14-Spring的JDBC模板：DBCP连接池配置
一般常用的连接池是DBCP和C3P0. package cn.itcast.spring3.demo1; import java.sql.DriverManager; import org.junit ...