作为布局的入门级选手,网上也查看了很多信息和资源

双飞翼的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实现三栏水平布局双飞翼与圣杯布局的更多相关文章

  1. 使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)

    来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年 ...

  2. css 实现三栏布局的四种方式

    三栏布局就是左中右,左右两边固定,中间自适应. 1. 绝对定位 <div class="left">左边</div> <div class=" ...

  3. CSS实现三栏布局(5种)

    常见的布局方式: float布局.Position定位.table布局.弹性(flex)布局.网格(grid)布局 那么我们就是用以上5种方式完成三栏布局,不过前提是左右宽度(假如左右宽度为300px ...

  4. 【CSS】三栏/两栏宽高自适应布局大全

    页面布局 注意方案多样性.各自原理.各自优缺点.如果不定高呢.兼容性如何 三栏自适应布局,左右两侧300px,中间宽度自适应 (1) 给出5种方案 方案一: float (左右浮动,中间不用给宽,设置 ...

  5. 【CSS】三栏布局的经典实现

    要求:自适应宽度,左右两栏固定宽度,中间栏优先加载: <!DOCTYPE html> <html> <head> <title>layout</t ...

  6. 前端经典面试题之CSS实现三栏布局,左右宽度固定,中间宽度自适应

    前端常问的面试题,题目:假设高度一定,请写出三栏布局,左右宽度300px,中间自适应. 看到这里我希望你能停下来思考几分钟, 1分钟~2分钟~3分钟~4分钟~5分钟! 好了,那么你想出了几种答案呢? ...

  7. css实现三栏自适应布局(两边固定,中间自适应)以及优缺点

    方法一:绝对定位(absolute + margin) 原理:给左右两边的元素设置absolute,这样左右两边的元素脱离标准文档流的控制,中间的元素自然会上来,然后给中间的元素设置margin留出左 ...

  8. CSS布局方案之圣杯布局

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  9. css实现三栏布局,两边定宽,中间自适应

    1.利用定位实现 css代码如下: .box{overflow: hidden;height: 100px;margin: 10px 0;} .box>div{height: 100%;} #b ...

随机推荐

  1. spring boot下接口调用失败重试方案

    背景: 在项目开发中,有时候会出现接口调用失败,本身调用又是异步的,如果是因为一些网络问题请求超时,总想可以重试几次把任务处理掉. 一些RPC框架,比如dubbo都是有重试机制的,但是并不是每一个项目 ...

  2. HDU 4507

    数位DP. 一般是利用DFS来求数位DP了,结合了记忆化搜索.设dp[i][j][k]为前i位,并且前i位的数位和mod7为j,前i位的数字的表示数字值mod7.为什么可以这样呢?因为继续DFS下去, ...

  3. 阶梯博弈&POJ 1704

    阶梯博弈: 先借用别人的一幅图片.(1阶梯之前还有一个0阶梯未画出) 阶梯博弈的最初定义是这样的:每一个阶梯只能向它的前一个阶梯移动本阶梯的点,直至最后无法移动的为输. 那么,利用NIM,只计算奇数级 ...

  4. 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 ...

  5. HDU 2027 汉字统计

    汉字统计 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...

  6. PL SQL Developer client 连接server

    安装完Oracle,PLSQL之后,在server中打开监听. 计算机右键-管理-服务和应用程序-服务-打开以Oracle开头的服务,特别是监听,这个最重要.详细如图所看到的. (1)配置监听的位置 ...

  7. js面试题--js的继承

    js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明白的继承机制.而是通过模仿实现的.依据js语言的本身的特性,js实现继承有下面通用的几种方式 1.使用对象冒充实现继承(该种实 ...

  8. [HDU 6318] Swaps and Inversions

    [题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=6318 [算法] 线段树 / 树状数组 [代码] #include<bits/stdc++.h ...

  9. 【POJ 2096】 Collecting Bugs

    [题目链接] http://poj.org/problem?id=2096 [算法] 概率DP [代码] #include <algorithm> #include <bitset& ...

  10. 05.使用jdk发布webservice服务

    无论服务端是用什么写的,使用框架写的还是用jdk写的,它都会发布出来这样一个东西.主要你遵循咱们这七个步骤来走就可以调用了. 咱们现在转换一下角色,自己发布一个服务让别人去调.怎么来发布一个服务? 我 ...