<!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. （十七）LU分解

    #encoding=utf-8 import numpy as np # 输入数据 # a用来记录x的系数 a=[[2.0,2.0,3.0],[4.0,7.0,7.0],[-2.0,4.0,5.0]] ...

  2. 国产手机没有google services 和google play崩溃，判断google services是否存在

    public static boolean isGooglePlayServiceAvailable (Context context) { int status = GooglePlayServic ...

  3. 【POJ 3233】Matrix Power Series

    [题目链接] 点击打开链接 [算法] 要求 A^1 + A^2 + A^3 + ... + A^k 考虑通过二分来计算这个式子 : 令f(k) = A^1 + A^2 + A ^ 3 + ... + ...

  4. AIZU AOJ 2309 Vector Compression 最小树形图（朱—刘算法）

    题意简述:给定若干个相同维度的向量,寻找一种排序方法,使得所有向量的表示长度总和最低. 所谓表示长度为(Aj-r*Ai)^2,其中i<j  数据范围:向量总数和维度均小于100 思路:(1)首先 ...

  5. JavaScript 解析读取XML文档 实例代码(转)

    JavaScript解析读取XML文件,主要就是加载并解析XML文件,然后就可以测试解析的XML文件的内容,打印输出来. 在线演示:http://demo.jb51.net/js/2012/readx ...

  6. SQL 存储过程语句拼接愁人的时间类型

    http://www.cnblogs.com/yrup/p/4201329.html 解决方法: Select CONVERT(varchar(100), GETDATE(), 25): 2006-0 ...

  7. P5043 【模板】树同构（[BJOI2015]树的同构）

    传送门 把所有的树给哈希起来就好了 具体的方法是一个节点的哈希值就是它所有儿子的哈希值给哈希起来,然后以每个节点为根算出它作为根节点的哈希值.那么把每棵树的哈希值排个序,与之前的比较就好了 注意把儿子 ...

  8. 【weiphp】安装中报错

    问题描述:安装的第三部报错“SQLSTATE[HY000]: General error: 2030 This command is not supported in the prepared sta ...

  9. less新手入门（一） 变量、extend扩展

    前景提要 个人在学习less时候的学习笔记及个人总结,主要是结合less中文网来学习的,但是说是中文网并不是中文呀,看起来很耽误时间,为了避免以后再次看的时候还要翻译思考,特意做此总结,方便以后查阅. ...

  10. 1393 0和1相等串 鸽笼原理 || 化简dp公式

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1393 正解一眼看出来的应该是鸽笼原理.记录每个位置的前缀和,就是dp[i ...