实现三个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.绝对定位法 ...
随机推荐
- 基于spring-boot的测试桩设计-添加配置文件（properties）
编写测试时,有些内容可以放到配置文件中. 第一步:新增配置文件 conf.properties 第二步:编写配置文件类 MockConf package mock.mockdemo.conf; imp ...
- c++ 进制转换函数
转自:https://blog.csdn.net/wangjunchengno2/article/details/78690248 strtol 函数: 它的功能是将一个任意1-36进制数转化为10进 ...
- php require_once的使用方法
学习笔记 require_once 语句和 require 语句完全相同,唯一区别是 PHP 会检查该文件是否已经被包含过,如果是则不会再次包含. equire_once() 为了避免重复加载文件. ...
- Codeforces 356A
这题有个注意的地方,就是对集合边读边删除的时候,应该尤为注意.. my_set.erase(it++) #include <iostream> #include <cstring ...
- Unity3D研究院之为什么Inspector视图中脚本前面的勾选框没了
我一个同事刚问我为啥有时候脚本的勾选项没有了?有时候不想让某条脚本执行,可以直接在编辑器中点掉勾选按钮即可.如下图所示 以前我也遇到过这个问题,但是一直都没怎么注意,因为一般情况下也用不到.今天刚好有 ...
- Hibernate中的Session对象 标签： hibernatesession 2017-01-22 22:10 238人阅读 评论(
Hibernate中的Session 大家在看hibernate视频的时候一定都发现了,每次要操作数据库,总是要新建一个session对象,Hibernate在对资料库进行操作之前,必须先取得Sess ...
- [ 浙江大学 数据库系统原理 ] [ MiniSQL ]课程设计
工作流程图如下.代码详见https://github.com/gstggsstt/minisql. 注:课程设计时间紧迫,编码基本没有性能考虑,仅限于实现功能,索引未使用B+tree.
- 获取登录的地点和ip地址的js
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script> <script>doc ...
- shell学习（22）- comm
1.预备知识 comm命令可用于比较两个已排序的文件.它可以显示出第一个文件和第二个文件所独有的行以及这两个文件所共有的行.该命令有一些选项可以禁止显示指定的列,以便于执行交集和求差操作. 交集(in ...
- java把Word文件转成html的字符串返回出去
1.需求是把前端上传的word文件解析出来,生成html的字符串返回给前端去展示,Word里面的图片可以忽略不显示,所以这段代码去掉了解析图片的代码 package com.lieni.core.ut ...