Layout两列定宽中间自适应三列布局
最容易理解的一种方法,以中间内容为主体,通过 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两列定宽中间自适应三列布局的更多相关文章
- css 两列布局中单列定宽单列自适应布局的6种思路
前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现 ...
- CSS布局 两列布局之单列定宽,单列自适应布局思路
前言 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.比如斗鱼的直播间,后台管理系统都是常用的 我们将从 float, inline-block, table, absolute, fl ...
- css高度已知,左右定宽,中间自适应三栏布局
css高度已知,左右定宽,中间自适应三栏布局: <!DOCTYPE html> <html lang="en"> <head> <meta ...
- css实现左边定宽右边自适应的5种方法总汇
在网页布局中,通常需要实现左边定宽右边自适应布局,默认html的结构如下: <div class="box"> <div class="left&quo ...
- NEC学习 ---- 布局 -两列定宽
这个布局相对来说比较容易, 就是最外层的容器中包含两个子容器, 一个容器向右浮动, 另一个向左浮动, 两个容器的宽度+2个容器之间的距离等于外层容易的中宽度. html代码: <div clas ...
- css布局:定宽,自适应
css三栏布局:1.中自:float,absolute,margin三种方法.2.中固:margin,table两种方法. 两边定宽,中间自适应: float: #left{ float:left; ...
- CSS基础布局--居中对齐,左侧定宽右侧自适应
CSS页面布局是web前端开发的最基本的技能,本文将介绍一些常见的布局方法,涉及到盒子布局,column布局,flex布局等内容.本文中,你可以看到一些水平垂直居中的方法,左侧固定宽度,右侧自适应的一 ...
- 请给出一个左侧定宽右侧自适应的HTML结构及样式
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=&q ...
- CSS | 圣杯布局、双飞翼布局 | 自适应三栏布局
圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式.两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局 虽然两者的实现方法略有差异,不过都遵循了以下要点: 1.两侧宽度固定 ...
随机推荐
- 数据库导入Excel
package com.cfets.ts.s.user.rest; import java.io.File; import java.io.FileInputStream; import java.i ...
- JQ获取选中select 标签的值
Jq://#ses为select 标签的Id$("#ses option:selected").val(); $("#ses option:selected") ...
- CSS3帧动画
在前面的文章中也有介绍过css3动画的内容,可见<关于transition和animation>和<webkitAnimationEnd动画事件>,今天又要唠叨一下这个东西了, ...
- Python的列表和元组
一.什么是列表 1.列表是一个可变的数据类型,它由[]表示,其中的每一项元素使用“,”逗号隔开,可以储存各种数据类型.列表相比于字符串,可以存放大量数据类型,其是有序的,有索引,可以使用切片,方便取值 ...
- C# sqlserver winform
//public static readonly string LocalSqlServer = System.Configuration.ConfigurationManager.AppSettin ...
- 重新指派usb转串口模块在linux系统中的设备调用名称
How to remap /dev/ttyUSB* to a specific name to be called by my program. How to map /dev/ttyUSB* to ...
- Spring MVC 学习笔记12 —— SpringMVC+Hibernate开发(1)依赖包搭建
Spring MVC 学习笔记12 -- SpringMVC+Hibernate开发(1)依赖包搭建 用Hibernate帮助建立SpringMVC与数据库之间的联系,通过配置DAO层,Service ...
- ELK学习博客
ELK实时日志分析平台环境部署--完整记录 https://www.cnblogs.com/kevingrace/p/5919021.html
- Java URLDecoder 和 URLEncoder 对中文进行编码和解码
URLDecoder类包含一个decode(String s,String enc)静态方法,它可以将application/x-www-form-urlencoded MIME字符串转成普通字符串: ...
- 27.Docker集群部署
对于scrapy的部署方式 1.Scrapyd 安装扩展组件,远程控制scrapy任务,包括部署源代码,启动任务,监听任务.scrapy-client .scrapyd api 协助完成部署和监听操作 ...