文档章节

三个div,两边div宽度固定,中间div宽度自适应

Ancora
 Ancora
发布于 2016/10/17 21:41
字数 171
阅读 14
收藏 0

方法1:对两边div设置宽高绝对定位,中间div设置高和外边距margin html: <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> css: *{ padding:0; margin:0; }

	.div1{
		width:200px;
		height:100px;
		background:red;
		position:absolute;
		top:0;
		left:0;
	}

	.div2{
		height:400px;
		background:green;
		margin:auto 100px auto 200px;
	}

	.div3{
		width:100px;
		height:500px;
		background:blue;
		position:absolute;
		top:0;
		right:0;
	}

方法2:该方法较为巧妙,值得借鉴 html: <div class="contain"><div class="div2"></div></div> <div class="div1"></div> <div class="div3"></div>

css: *{ padding:0; margin:0; }

	.div1{
		width:200px;
		height:100px;
		background:red;
		float:left;
		margin-left:-100%;
	}

	.contain{
		float:left;
		width:100%;
	}

	.div2{
		height:400px;
		background:green;
		margin:auto 100px auto 200px;
	}

	.div3{
		width:100px;
		height:500px;
		background:blue;
		float:left;
		margin:-100px;
	}

© 著作权归作者所有

上一篇: 下拉菜单组件
Ancora
粉丝 0
博文 5
码字总数 721
作品 0
虹口
程序员
私信 提问
圣杯布局(holy grail)总结

什么是圣杯布局? 根据 wikipedia词条,圣杯指多列等高的网页布局。因为目前的实现方法都存在局限,而又很难找到一个最优解,圣杯因此而得名。 holy-grail.png 在Matthew Levine 的文章 中提...

一拾五
2018/01/14
0
0
三种三栏网页宽度自适应布局方法

一、前言 在如今各个分辨率显示器N足鼎立的时期,页面采用流动性布局(亦可称自适应布局)不失为一个好选择。当然,具体实现不是那么容易,需要一定的css功力和实践经验。本文不讲细节,只讲...

乱世中的单纯
2016/03/14
913
0
关于BFC的一些思考

Question 以下三个div将会会如何放置(margin collapsing)? 同一个BFC中,相邻的块状元素都是垂直放置吗? 如何清除浮动?根据什么原理? 如何对左侧栏200px,主内容自适应进行布局? 如何使...

shanyue
2017/11/29
0
0
三种三栏网页宽度自适应布局方法,转载大神的,适合收藏

一、前言 在如今各个分辨率显示器N足鼎立的时期,页面采用流动性布局(亦可称自适应布局)不失为一个好选择。当然,具体实现不是那么容易,需要一定的css功力和实践经验。本文不讲细节,只讲...

曾杨
2014/03/12
731
0
css之左边div固定宽度右边div自适应布局

0、要实现的布局的效果图是这样子的: a)外边有个大的div背景为粉红色,包住里面的div,宽度自适应,高度根据里面两个div高度最大那个撑高; b)里面左边是一个黄色的div,固定宽度; c)里...

cobish
2014/09/27
713
0

没有更多内容

加载失败,请刷新页面

加载更多

mysql概览

学习知识,首先要有一个总体的认识。以下为mysql概览 1-架构图 2-Detail csdn |简书 | 头条 | SegmentFault 思否 | 掘金 | 开源中国 |

程序员深夜写bug
今天
8
0
golang微服务框架go-micro 入门笔记2.2 micro工具之微应用利器micro web

micro web micro 功能非常强大,本文将详细阐述micro web 命令行的功能 阅读本文前你可能需要进行如下知识储备 golang分布式微服务框架go-micro 入门笔记1:搭建go-micro环境, golang微服务框架...

非正式解决方案
今天
6
0
前端——使用base64编码在页面嵌入图片

因为页面中插入一个图片都要写明图片的路径——相对路径或者绝对路径。而除了具体的网站图片的图片地址,如果是在自己电脑文件夹里的图片,当我们的HTML文件在别人电脑上打开的时候图片则由于...

被毒打的程序猿
今天
8
0
Flutter 系列之Dart语言概述

Dart语言与其他语言究竟有什么不同呢?在已有的编程语言经验的基础上,我们该如何快速上手呢?本篇文章从编程语言中最重要的组成部分,也就是基础语法与类型变量出发,一起来学习Dart吧 一、...

過愙
今天
5
0
rime设置为默认简体

转载 https://github.com/ModerRAS/ModerRAS.github.io/blob/master/_posts/2018-11-07-rime%E8%AE%BE%E7%BD%AE%E4%B8%BA%E9%BB%98%E8%AE%A4%E7%AE%80%E4%BD%93.md 写在开始 我的Arch Linux上......

zhenruyan
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部