css实现三栏水平布局双飞翼与圣杯布局
作为布局的入门级选手,网上也查看了很多信息和资源
双飞翼的html结构
<div class="container">
<div class="main">
<div class="content">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
双飞翼和圣杯的布局方式类似,都用到了关键的浮动和负值的margin-left
第一步:先正常设置长宽,同一高度为120px,由于是标准流的缘故,所以三个div盒子一共分为三层
.left, .right, .main {
height: 120px;
}
.content {
margin: 0 300px 0 200px;
}
.left {
width: 200px;
background-color: green;
}
.right {
width: 300px;
background-color: red;
}
.main {
width: 100%;
background-color: blue;
}
效果如下
第二步:添加浮动,全部脱离标准流,因为main是的宽度是100%,占满整个盒子的宽度,所以left和right的盒子被挤到第二行
.left, .right, .main {
height: 120px;
float: left;
}
.content {
margin: 0 300px 0 200px;
}
.left {
width: 200px;
background-color: green;
}
.right {
width: 300px;
background-color: red;
}
.main {
width: 100%;
background-color: blue;
}
效果如下
第三步:使用margin-left的负值属性来实现这个效果
这个margin-left:-100%指的是子盒子的左边框相对父盒子的右边框的距离
.left, .right, .main {
height: 120px;
float: left;
text-align: center;
}
.content {
margin: 0 300px 0 200px;
}
.left {
width: 200px;
background-color: green;
margin-left: -100%;
}
.right {
width: 300px;
background-color: red;
margin-left: -300px;
}
.main {
width: 100%;
background-color: blue;
}
相对第二步,就多了margin-left的属性
先看right盒子,相对父盒子container,他的左边框必须距离container的右边框300px,所以是margin-left: -300px;
left一样,left盒子的左边框必须距离父盒子的右边框的100%个宽度,所以是margin-left: -100%;
效果如下
圣杯的布局类似双飞翼
多了定位,div相对少了一个
<div class="container">
<div class="middle">middle</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
.container {
padding: 0 300px 0 200px;
}
.left,.right,.middle {
height: 120px;
float: left;
position: relative;
text-align: center;
}
.middle {
width: 100%;
background-color: blue;
}
.left {
left: -200px;
width: 200px;
margin-left: -100%;
background-color: green;
}
.right {
right: -300px;
width: 300px;
margin-left: -300px;
background-color: red;
}
关于圣杯布局可以参考博客
https://blog.csdn.net/wangchengiii/article/details/77926868
css实现三栏水平布局双飞翼与圣杯布局的更多相关文章
- 使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)
来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年 ...
- css 实现三栏布局的四种方式
三栏布局就是左中右,左右两边固定,中间自适应. 1. 绝对定位 <div class="left">左边</div> <div class=" ...
- CSS实现三栏布局(5种)
常见的布局方式: float布局.Position定位.table布局.弹性(flex)布局.网格(grid)布局 那么我们就是用以上5种方式完成三栏布局,不过前提是左右宽度(假如左右宽度为300px ...
- 【CSS】三栏/两栏宽高自适应布局大全
页面布局 注意方案多样性.各自原理.各自优缺点.如果不定高呢.兼容性如何 三栏自适应布局,左右两侧300px,中间宽度自适应 (1) 给出5种方案 方案一: float (左右浮动,中间不用给宽,设置 ...
- 【CSS】三栏布局的经典实现
要求:自适应宽度,左右两栏固定宽度,中间栏优先加载: <!DOCTYPE html> <html> <head> <title>layout</t ...
- 前端经典面试题之CSS实现三栏布局,左右宽度固定,中间宽度自适应
前端常问的面试题,题目:假设高度一定,请写出三栏布局,左右宽度300px,中间自适应. 看到这里我希望你能停下来思考几分钟, 1分钟~2分钟~3分钟~4分钟~5分钟! 好了,那么你想出了几种答案呢? ...
- css实现三栏自适应布局(两边固定,中间自适应)以及优缺点
方法一:绝对定位(absolute + margin) 原理:给左右两边的元素设置absolute,这样左右两边的元素脱离标准文档流的控制,中间的元素自然会上来,然后给中间的元素设置margin留出左 ...
- CSS布局方案之圣杯布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- css实现三栏布局,两边定宽,中间自适应
1.利用定位实现 css代码如下: .box{overflow: hidden;height: 100px;margin: 10px 0;} .box>div{height: 100%;} #b ...
随机推荐
- spring boot下接口调用失败重试方案
背景: 在项目开发中,有时候会出现接口调用失败,本身调用又是异步的,如果是因为一些网络问题请求超时,总想可以重试几次把任务处理掉. 一些RPC框架,比如dubbo都是有重试机制的,但是并不是每一个项目 ...
- HDU 4507
数位DP. 一般是利用DFS来求数位DP了,结合了记忆化搜索.设dp[i][j][k]为前i位,并且前i位的数位和mod7为j,前i位的数字的表示数字值mod7.为什么可以这样呢?因为继续DFS下去, ...
- 阶梯博弈&POJ 1704
阶梯博弈: 先借用别人的一幅图片.(1阶梯之前还有一个0阶梯未画出) 阶梯博弈的最初定义是这样的:每一个阶梯只能向它的前一个阶梯移动本阶梯的点,直至最后无法移动的为输. 那么,利用NIM,只计算奇数级 ...
- HDOJ1796 How many integers can you find(dfs+容斥)
How many integers can you find Time Limit: 12000/5000 MS (Java/Others) Memory Limit: 65536/32768 ...
- HDU 2027 汉字统计
汉字统计 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submi ...
- PL SQL Developer client 连接server
安装完Oracle,PLSQL之后,在server中打开监听. 计算机右键-管理-服务和应用程序-服务-打开以Oracle开头的服务,特别是监听,这个最重要.详细如图所看到的. (1)配置监听的位置 ...
- js面试题--js的继承
js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明白的继承机制.而是通过模仿实现的.依据js语言的本身的特性,js实现继承有下面通用的几种方式 1.使用对象冒充实现继承(该种实 ...
- [HDU 6318] Swaps and Inversions
[题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=6318 [算法] 线段树 / 树状数组 [代码] #include<bits/stdc++.h ...
- 【POJ 2096】 Collecting Bugs
[题目链接] http://poj.org/problem?id=2096 [算法] 概率DP [代码] #include <algorithm> #include <bitset& ...
- 05.使用jdk发布webservice服务
无论服务端是用什么写的,使用框架写的还是用jdk写的,它都会发布出来这样一个东西.主要你遵循咱们这七个步骤来走就可以调用了. 咱们现在转换一下角色,自己发布一个服务让别人去调.怎么来发布一个服务? 我 ...