css布局------左边宽度不定,右边宽度自动填满剩余空间
HTML
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
CSS
/*方法1:浮动布局实现*/
.container {
overflow: hidden;
}
.left {
float: left;
height: 100px;
background-color: red;
}
.right {
max-width: 100%;
height: 100px;
background-color: blue;
}
/*方法2:弹性布局实现*/
.container {
display: flex;
}
.left {
flex: 0 0 auto;
height: 100px;
background-color: red;
}
.right {
flex: 1 1 auto;
height: 100px;
background-color: blue;
}
css布局------左边宽度不定,右边宽度自动填满剩余空间的更多相关文章
- 两个DIV,左DIV宽度固定,右DIV自动填满剩余空间
<style type="text/css"> #main{ width:98%; } #sidebar{ float:left; width:200px; backg ...
- css实现div的高度填满剩余空间
css实现div的高度填满剩余空间 .top{ width: 100%; height: 70px;} .bottom{background-color: #cc85d9;width: 100%;po ...
- 【转】CSS实现div的高度填满剩余空间
转自:http://www.cnblogs.com/zhujl/archive/2012/03/20/2408976.html 高度自适应问题,我很抵触用js去解决,因为不好维护,也不够自然,但是纯用 ...
- [WP8] ListBox的Item宽度自动填满
[WP8] ListBox的Item宽度自动填满 范例下载 范例程序代码:点此下载 问题情景 开发WP8应用程序的时候,常常会需要使用ListBox作为容器来呈现各种数据集合.但是在ListBox呈现 ...
- ext:grid分页,列宽度自动填满grid宽度
var cm = new Ext.grid.ColumnModel([{ header : '编号', dataIndex : 'id' }, { header ...
- li 水平排列并自动填满 ul
找了li 如何水平排列并自动填满 ul,同时 li 宽度平均?资料,里面有提到"请用js动态计算保证兼容性", 因为我想实现的是,水平滚动条,ul的上级div是固定的宽度1000p ...
- css网页布局 --- 左边固定,右边自适应
div的布局统一如下: <body> <div class="wrap"> <div class="left"></d ...
- 转:CSS布局奇淫技巧之-宽度自适应
css这个东西,说难不难,说容易也不容易.我觉得最重要的还是经验的积累,正所谓的不积硅步,无以至千里.这一系列文章讲述几种css特殊布局的实现,也当作为自己做个备忘吧. 首先讲的是三列布局,左右两列宽 ...
- css实现左边定宽右边自适应的5种方法总汇
在网页布局中,通常需要实现左边定宽右边自适应布局,默认html的结构如下: <div class="box"> <div class="left&quo ...
随机推荐
- python_day1_变量
一.变量 定义: 通俗来讲可变化的量称之为变量,专业的解释为:把程序运算的中间结果临时存到内存里,以备后面的代码继续调用,这几个名字的学名就叫做“变量” 用法: name = 'zzx' 其中name ...
- 08-jQuery的位置信息
Query的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集合中获取第一个元素的当前计算宽 ...
- Anton 上课题
Anton 上课题 Anton likes to play chess. Also he likes to do programming. No wonder that he decided to a ...
- iowait过高处理
网管告警: 告警主机:YiDHLWJKFZ-js-app- 主机IP:192.168.***.*** 告警项目:system.cpu.util[,iowait] 告警时间: :: 告警等级:Warni ...
- eclipse经常出现——未响应!!!
现象:启动eclipse缓慢,启动完成经常出现未响应情况.偶然在打开一个项目时候,也出现未响应. 原因:虚拟内存不足,或者电脑本身内存不足.但是目前绝大多数PC而言,内存应该是充足的,因此可以修改虚拟 ...
- vuejs-devtools
先看看http://www.cnblogs.com/zhnaglei/p/7121482.html 这里的方法. 如果出现vue.js not detected之类的错误.试试用调试模式,就是用npm ...
- 【手记】解决VS发布asp.net项目报错“该项目中不存在目标GatherAllFilesToPublish”及后续问题
办法在最后. 用VS2017打开一个以前用VS2010写的asp.net项目后,设置好发布选项(发布到文件夹),发布的时候报错如图: 搜索一番,找到的办法是: 在项目文件(xxx.csproj)中,在 ...
- LDO和DC-DC的概念,区别及优缺点
最近在做蓝牙项目的时候,遇到了需要配置这两种不同的供电模式的问题,这里顺便温习一下这种供电方式的概念,做个总结. LDO :LOW DROPOUT VOLTAGE 低压差线性稳压器,故名思意,为线性的 ...
- Thymeleaf教程入门到深入1:基础介绍
1 介绍 1.1 简介 Thymeleaf是一个用于Web和独立Java环境的模板引擎,能够处理HTML.XML.JavaScript.CSS甚至纯文本.能轻易的与Spring MVC等Web框架进行 ...
- Jenkins系列之一——初识
Jenkins Jenkins是一个开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能. 功能 Jenkins功能包括 ...