<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .main{font-size:0;} /* 去掉行内块受换行符的影响*/
        .left{display:inline-block;width:200px;height:500px;background-color:red}
        .middle{display:inline-block;width: calc(100% - 420px);height:500px;background-color:#000;margin:0 10px;}
        .right{display:inline-block;width:200px;height:500px;background-color:red}
    </style>
</head>
<body>

<div class="main">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</div>

</body>
</html>

行内块+calc+margin 三列布局的更多相关文章

  1. 前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位

    前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位 一丶css选择器的优先级 行内 > id选择器 > 类选择器 ...

  2. CSS的布局之文档流，与行内/块级元素的延伸

    文档流,即(position:stiatic),是html布局机制的默认状态. 文档流在排列的过程中,块级元素从上到下,行内元素,从左到右. ·块级元素 <div> <h系列> ...

  3. 1 background（复合属性）与font（复合属性） 2 行内块的间距问题 3 行内元素的margin 4 清除浮动 5定位的元素的层级 6 Border-radius: 边框半径

    1 background(复合属性)与font(复合属性): background: 颜色  图片的链接  是否平铺  背景位置 是否滚动.(可以随意调动或省略) Font: 粗度 字体风格 字体大小 ...

  4. __x__(17)0906第三天__块元素block_内联元素inline_行内块元素inline-block

    1. 块元素block 独占一行的元素 一般使用块元素包含内联元素,用作页面布局 <a> 标签可以包含任何除了a标签以外的元素 <p> 标签不能包含块元素 h1... ...h ...

  5. web标准(复习)--3 二列和三列布局

    今天学习二列和三列布局,将涉及到以下内容和知识点 二列自适应宽度 二列固定宽度 二列固定宽度居中 xhtml的块级元素(div)和内联元素(span) float属性 三列自适应宽度 三列固定宽度 三 ...

  6. css三列布局之双飞翼pk圣杯

    三列布局:两边定宽,中间自适应! 看到这个问题,我第一眼想的就是两边定宽float左右,中间加一个margin宽度自适应或者直接设一个overflow:hidden触发bfc机制,这样也可以,看上去也 ...

  7. html 三列布局（两列自适应，一列固定宽度）

    不做过多解释:主要是记录一个完整的布局样式,实现页面大致三列其中左右两列是自适应宽度,中间固定宽度效果. 不多少代码奉上: CSS样式代码: /******************** *公共标签样式 ...

  8. CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼

    今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...

  9. CSS(3)---块级标签、行内标签、行内块标签

    块级标签.行内标签.行内块标签 html中的标签元素三种类型:块级标签.行内标签.行内块标签. 一.概述 1.块级标签 概念 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属 ...

随机推荐

  1. [Codeforces 339D] Xenia and Bit Operations

    [题目链接] https://codeforces.com/problemset/problem/339/D [算法] 线段树模拟即可 时间复杂度 :O(MN) [代码] #include<bi ...

  2. 【POJ 1804】 Brainman

    [题目链接] 点击打开链接 [算法] 本题是一个很经典的问题 : 归并排序求逆序对数,可以用分治算法解决 分治,分而治之,分治算法的思想就是将一个问题转化为若干个子问题,对这些子问题分别求解,最后, ...

  3. 【BZOJ 3732】 Network

    [题目链接] 点击打开链接 [算法] 求出这个图的最小生成树,对于每次询问,用倍增法求出最近公共祖先,查询最小生成树上两点路径上的最大值 算法的正确性?            假设x和y在最小生成树中 ...

  4. 洛谷 P2577 [ ZJOI 2005 ] 午餐 —— DP + 贪心

    题目:https://www.luogu.org/problemnew/show/P2577 首先,想一想可以发现贪心策略是把吃饭时间长的人放在前面: 设 f[i][j] 表示考虑到第 i 个人,目前 ...

  5. STM32 的堆栈静态区

    STM32的分区从0x2000 0000开始.静态区,堆,栈. 所有的全局变量,包括静态变量之类的,全部存储在静态存储区.紧跟静态存储区之后的,是堆区(如没用到malloc,则没有该区),之后是栈区, ...

  6. vue 加载文件，省略后缀后的加载顺序

    Vue使用import ... from ...来导入组件,库,变量等.而from后的来源可以是js,vue,json.这个是在webpack.base.conf.js中设置的: module.exp ...

  7. sql server数据库占用cpu太大，使用sys.dm_exec_query_stats查询优化

    查询sql语句占用 CPU详细信息: SELECT (SELECT TOP 1 SUBSTRING(s2.text,statement_start_offset / 2+1 , ( (CASE WHE ...

  8. bzoj 1703: [Usaco2007 Mar]Ranking the Cows 奶牛排名【bitset+Floyd传递闭包】

    把关系变成有向边,稍微想一下就是要求在有向图中不能到达的点对个数,这个可以用Floyd传递闭包来做,但是n^3的复杂度跑不了1000 考虑bitset优化! 因为传递过程只会出现0和1,用bitset ...

  9. 关于Webpack的的认识及傻瓜式教学

    刚学习了Webpack,ememememememememem就赶脚是一个打包工具,将js.css.json.img等等通通打包为最终的文件,最后渲染为一个页面. 也是终于捋清了Webpack的思路,在 ...

  10. 源码阅读之HashMap(JDK8)

    概述 HashMap根据键的hashCode值存储数据,大多数情况下可以直接定位到它的值,因而具有很快的访问速度,但遍历顺序却是不确定的. HashMap最多只允许一条记录的键为null,允许多条记录 ...