最容易理解的一种方法,以中间内容为主体,通过 margin 或者 padding 将两侧撑开,最后用 absolute 定位两侧

html:

<div class="container">
<div class="left"> </div>
<div class="main"></div>
<div class="rigth"> </div>
</div>
css:
body,html {
height: 100%;
}
.container{
position: relative;
height: 100%;
}
.left,.rigth{
position: absolute;
top: 0;
width: 200px;
height: 100%;
}
.left{
left: 0;
background: red; }
.rigth{
right: 0;
background: black;
}
.main {
margin: 0 200px;
background: blue;
height: 100%;
} 第二种移动端flex布局
html:
<div class="container">
<div class="left"> </div>
<div class="main"></div>
<div class="rigth"> </div> css:
.container {
display: flex;
}
.left, .right {
width: 200px;
}
.main {
display: flex;
flex: auto;
} 三左右浮动
css:
.container {
overflow: hidden;
}
.left,
.right {
width: 200px;
}
.main {
width: auto;
}
.left {
float: left;
}
.right {
float: right;
}
												

Layout两列定宽中间自适应三列布局的更多相关文章

  1. css 两列布局中单列定宽单列自适应布局的6种思路

    前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现 ...

  2. CSS布局 两列布局之单列定宽,单列自适应布局思路

    前言 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.比如斗鱼的直播间,后台管理系统都是常用的 我们将从 float, inline-block, table, absolute, fl ...

  3. css高度已知,左右定宽,中间自适应三栏布局

    css高度已知,左右定宽,中间自适应三栏布局: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  4. css实现左边定宽右边自适应的5种方法总汇

    在网页布局中,通常需要实现左边定宽右边自适应布局,默认html的结构如下: <div class="box"> <div class="left&quo ...

  5. NEC学习 ---- 布局 -两列定宽

    这个布局相对来说比较容易, 就是最外层的容器中包含两个子容器, 一个容器向右浮动, 另一个向左浮动, 两个容器的宽度+2个容器之间的距离等于外层容易的中宽度. html代码: <div clas ...

  6. css布局:定宽,自适应

    css三栏布局:1.中自:float,absolute,margin三种方法.2.中固:margin,table两种方法. 两边定宽,中间自适应: float: #left{ float:left; ...

  7. CSS基础布局--居中对齐,左侧定宽右侧自适应

    CSS页面布局是web前端开发的最基本的技能,本文将介绍一些常见的布局方法,涉及到盒子布局,column布局,flex布局等内容.本文中,你可以看到一些水平垂直居中的方法,左侧固定宽度,右侧自适应的一 ...

  8. 请给出一个左侧定宽右侧自适应的HTML结构及样式

    <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=&q ...

  9. CSS | 圣杯布局、双飞翼布局 | 自适应三栏布局

    圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式.两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局 虽然两者的实现方法略有差异,不过都遵循了以下要点: 1.两侧宽度固定 ...

随机推荐

  1. 数据库导入Excel

    package com.cfets.ts.s.user.rest; import java.io.File; import java.io.FileInputStream; import java.i ...

  2. JQ获取选中select 标签的值

    Jq://#ses为select 标签的Id$("#ses option:selected").val(); $("#ses option:selected") ...

  3. CSS3帧动画

    在前面的文章中也有介绍过css3动画的内容,可见<关于transition和animation>和<webkitAnimationEnd动画事件>,今天又要唠叨一下这个东西了, ...

  4. Python的列表和元组

    一.什么是列表 1.列表是一个可变的数据类型,它由[]表示,其中的每一项元素使用“,”逗号隔开,可以储存各种数据类型.列表相比于字符串,可以存放大量数据类型,其是有序的,有索引,可以使用切片,方便取值 ...

  5. C# sqlserver winform

    //public static readonly string LocalSqlServer = System.Configuration.ConfigurationManager.AppSettin ...

  6. 重新指派usb转串口模块在linux系统中的设备调用名称

    How to remap /dev/ttyUSB* to a specific name to be called by my program. How to map /dev/ttyUSB* to ...

  7. Spring MVC 学习笔记12 —— SpringMVC+Hibernate开发(1)依赖包搭建

    Spring MVC 学习笔记12 -- SpringMVC+Hibernate开发(1)依赖包搭建 用Hibernate帮助建立SpringMVC与数据库之间的联系,通过配置DAO层,Service ...

  8. ELK学习博客

    ELK实时日志分析平台环境部署--完整记录 https://www.cnblogs.com/kevingrace/p/5919021.html

  9. Java URLDecoder 和 URLEncoder 对中文进行编码和解码

    URLDecoder类包含一个decode(String s,String enc)静态方法,它可以将application/x-www-form-urlencoded MIME字符串转成普通字符串: ...

  10. 27.Docker集群部署

    对于scrapy的部署方式 1.Scrapyd 安装扩展组件,远程控制scrapy任务,包括部署源代码,启动任务,监听任务.scrapy-client .scrapyd api 协助完成部署和监听操作 ...