flex 三列布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.main {
height: 500px;
background-color: blue;
display: flex;
}
.left {
width: 200px;
height: 500px;
background-color: blue;
}
.middle {
flex: 1;
height: 500px;
background-color: yellow;
}
.right {
width: 200px;
height: 500px;
background-color: blue;
}
</style>
</head>
<body>
<div class="main">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div> </body>
</html>
flex 三列布局的更多相关文章
- flex实现三列布局
css3新引入的flex在某些情况下布局非常实用 因为它是弹性盒子所以自适应效果会很棒 不过各项布局方案还是各有优劣 <!DOCTYPE html> <html lang=" ...
- 两列布局（浮动、定位、flex）和三列布局（圣杯、双飞翼、flex）
demo 各种布局演示 https://jsfiddle.net/mayufo/qp890peq/1/ 两栏布局 浮动 <div class="box1"> <d ...
- CSS三列布局
× 目录 两侧定宽中间自适应 两列定宽一侧自适应 中间定宽两侧自适应一侧定宽两列自适应三列自适应总结 前面的话 前面已经介绍过单列定宽单列自适应和两列自适应的两列布局.本文介绍三列布局,分为两侧定宽中 ...
- Layout 不可思议（二）—— 两侧定宽的三列布局
三列布局作为网页设计中最常见的布局,其实现方法早已被诸位前端大神摸透 网上相关的文章很多,原本已无必要再做赘述 不过既然开了 Layout 系列,三列布局就是必修课 本文整理了一些常用的实现方法,然后 ...
- css常见的各种布局下----三列布局
css 三列布局,左右固定宽度右边自适应 1不使用定位,只使用浮动可以实现左右固定,中间宽度自适应布局 1.1.1 自适应部分一定要放第一个位子,使用浮动,并且设置宽度为100%,不设置浮动元素内容不 ...
- CSS实现三列布局
三列布局指的是两边两列定宽,中间的宽度自适应. 常用三种方法: 定位 浮动 弹性盒布局 定位方式 最直观和容易理解的一种方法,左右两栏选择绝对定位,固定于页面的两侧,中间的主体选择用margin确定位 ...
- CSS三列布局之左右宽度固定，中间元素自适应问题
最近学到了几种关于左右固定宽度,中间自适应的三列布局的方法,整理了一下,在这里跟大家一起分享分享,其中有什么不足的还望各位给指导指导哈. 首先我想到的是float——浮动布局 使用浮动,先渲染左右两个 ...
- CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼
今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...
- css 三列布局
前面的话 前面已经介绍过单列定宽单列自适应和两列自适应的两列布局.本文介绍三列布局,分为两侧定宽中间自适应.两列定宽一侧自适应.中间定宽两侧自适应.一侧定宽两列自适应和三列自适应这五种情况 两侧定宽中 ...
随机推荐
- gdb 8.0.1连接qemu时，出现“Remote 'g' packet reply is too long”
1 原因 “Note that other tutorials also add a "-S" parameter so QEMU starts the kernel stoppe ...
- Swing中子元素截获MouseEvent问题
在父元素中绑定MouseMotion监听,但是当鼠标在子元素中时父元素无法收到 这时候需要在子元素中绑定MouseMotion,然后使用: getParent().dispatchEvent(e); ...
- android 3G移植【转】
本文转载自:http://blog.csdn.net/hanmengaidudu/article/details/17028383 一 开发环境简介 内容 说明 3G模块 华为EM820W(WCDMA ...
- YTU 2640: 编程题：运算符重载---矩阵求和
2640: 编程题:运算符重载---矩阵求和 时间限制: 1 Sec 内存限制: 128 MB 提交: 484 解决: 190 题目描述 /* 有两个矩阵a和b,均为2行3列.求两个矩阵之和. 重 ...
- python-----tuple用法
有一种有序列表叫元组:tuple.tuple和list非常类似,但是tuple一旦初始化就不能修改,比如同样是列出同学的名字: >>> classmates = ('Michael' ...
- Runtime ----- 带你上道
在IOS开发和学习过程中,我们经常会接触到一个词: Runtime .很多开发者对之既熟悉又陌生,基本都是浅尝辄止,达不到灵活使用的水平(话说开发中也确实不经常用..)本文和大家一起研究一下,Run ...
- 20. Extjs学习笔记——Ext.data.JsonStore使用说明
Ext.data.JsonStore继承于Ext.data.Store,使得从远程JSON数据创建stores更为方便的简单辅助类.JsonStore合成了Ext.data.HttpProxy与Ext ...
- Java中的APT的工作过程
Java中的APT的工作过程 APT即Annotatino Processing Tool, 他的作用是处理代码中的注解, 用来生成代码, 换句话说, 这是用代码生成代码的工具, 减少boilerpl ...
- select多选
1.css <style> .divBox{ width:400px; margin:100px auto; } .divBox span{ vertical-align:top; dis ...
- 转 mysql 5.7版本修改编码为utf-8
刚开始学习MySQL,下载的是官网最新版本 5..7.14,使用cmd输入中文时报错,于是开始修改mysql默认编码(windows下) 首先通过 show variables like 'chara ...