css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）
原文:css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）
1.应用场景
左侧一个导航栏宽度固定，右侧内容根据用户浏览器窗口宽度进行自适应
2.思路
首先把这个问题分步解决，需要攻克以下两点：
1）让两个div并排到一行
2）让一个div宽度固定，另个div占据剩下宽度的空间
关于第一点，首先要明确，div属于块级元素，在文档标准流中单独占据一行。要想多个div在一行，就可以想办法让div脱离标准流，比如使用float或者absolute；
关于第二点，首先有一个宽度固定的div，另外自适应的div宽度是多少？首先这个宽度不能写“100%”，因为这里的100%是相对于第一个非静态祖先元素的，也就是说如果这样写，页面会出现整个页面宽度+左边固定列宽度的情形。那么对自适应宽度的div处理方法是不去设置它的width属性，浏览器会自动计算后让它占一行，接下来给他设置margin-left属性把左侧固定列空间空出即可。
3.实现
1）html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="task001.css">
<meta charset="utf-8">
</head>
<body>
<!-- 左侧固定列 -->
<div class="fixedColumn"></div>
<!-- 右侧自适应宽度列 -->
<div class="flexibleColumn"</div>
</body>
</html>
2）css
/*左固定列*/
.fixedColumn{
width: 40px;
height: 100%;
background-color: red;
float: left;
/*position: absolute;
left: 0;*/
}
/*右自适应列*/
.flexibleColumn{
height: 100%;
background-color: blue;
margin-left: 40px;
}
注：
1）fixedColumn 里注释的方法即绝对定位的实现方式，取消注释后把float那句注释掉，可以实现相同的效果
2）使用float需要注意清除浮动造成父元素塌陷的问题（这里不用清除，因为自适应列和固定列一样高，在标准流中可以撑起父元素）
4.小结
一定要自己实现试试，注意只有固定列脱离了文档流，自适应列还在文档流中！其他没什么要说的了，但是应该还有更好的方法，等我看到了一并总结过来~
css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）的更多相关文章
- CSS两列布局——左侧宽度固定，右侧宽度自适应的3种方法
1.左侧绝对定位法 直接看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- CSS 实现：两栏布局（一边固定，一边自适应）
☊[实现要求]:CSS实现左边固定,右边自适应父容器宽度的两栏布局. <body> <div class="left"></div> <d ...
- css 关于两栏布局，左边固定，右边自适应
好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...
- css 两列布局中单列定宽单列自适应布局的6种思路
前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现 ...
- CSS布局 两列布局之单列定宽,单列自适应布局思路
前言 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.比如斗鱼的直播间,后台管理系统都是常用的 我们将从 float, inline-block, table, absolute, fl ...
- 转载 html div三列布局占满全屏（左右两列定宽或者百分比、中间自动适应，div在父div中居底）
原文地址:http://blog.csdn.net/duyelang/article/details/20558899 <p><!DOCTYPE html> <html ...
- css之页面两列布局
两列布局:左边固定,后边自适应 第一种方法:左边的div左浮动或者是绝对定位,右边的div加margin-left:左边div的宽度 html部分 <div class="left&q ...
- CSS常用布局方式-两列布局、三列布局
CSS基础 2.几种布局方式1)table布局 当年主流的布局方式,第一种是通过table tr td布局 示例: <style type="text/css"> ta ...
- CSS两列布局的多种方式
两列布局(一侧固定宽度,一侧自适应),在工作中应该是经常使用到,可以说是前端基础了.这种两列布局的样式是我们在平时工作中非常常见的设计,同时也是面试中要求实现的高频题.很有必要掌握以备不时之需.这里总 ...
随机推荐
- OpenStack高可用方案及配置
1 OpenStack高可用介绍 1.1 无状态和有状态服务 无状态服务指的是该服务接收的请求前后之间没有相关关系,接收并处理完该请求后不保存任何状态,在OpenStack的服务中常见的无状态服务 ...
- Mint-ui 中 Popup 作为组件引入，控制弹出框的显示与隐藏遇到的问题。
Popup组件的结构: <template> <div> <!--分享弹出窗 begin--> <mt-popup class="s ...
- SGU---462 Electrician 最大生成树
题目链接: https://cn.vjudge.net/problem/SGU-462 题目大意: 有N条电线需要接入电网,第i条电线计划连接ai和bi两个地点,电线有两个属性:ri(电线稳定度)和c ...
- Debian下Cannot set LC_CTYPE to default locale: No such file or directory解决方法
把语言环境变量改为英文 将Ubuntu系统语言环境改为英文的en_US.UTF-8 查看当前系统语言环境 locale 编辑配置文件,将zh_US.UTF-8改为en_US.UTF-8,zh改为en ...
- 【[NOI2009]管道取珠】
--\(shallwe\):这道题是\(noipDay2T2\)难度 好一个\(Day2T2\)难度啊,我觉得我可以退役了 平方和好像没有什么办法可以快速统计,于是考虑转化一下 我们可以将题意转化成这 ...
- 【[国家集训队]Crash的数字表格 / JZPTAB】
这道题我们要求的是 \[\sum_{i=1}^N\sum_{j=1}^Mlcm(i,j)\] 总所周知\(lcm\)的性质不如\(gcd\)优雅,但是唯一分解定理告诉我们\(gcd(i,j)\time ...
- [USACO09MAR]Sand Castle
嘟嘟嘟 太水了,大佬们就绕道吧…… 就是m, b数组分别排个序,然后更改对应位置的m[i]和b[i],就行了. 因为如果m[i]不改为b[i]而是b[i + 1]的话,那么必定要将m[j] (j &g ...
- [转]MBTiles移动存储简介
首先奉上官网地址http://mapbox.com/developers/mbtiles/#storing_tiles 由于英文水平有限,看资料很费眼睛,特将它翻译成中文 存储瓦片 地图制作者面对一个 ...
- 用c写一个小的聊天室程序
1.聊天室程序——客户端 客户端我也用了select进行I/O复用,同时监控是否有来自socket的消息和标准输入,近似可以完成对键盘的中断使用. 其中select的监控里,STDOUT和STDIN是 ...
- Swift 开发语法
文/Tuberose(简书作者)原文链接:http://www.jianshu.com/p/5e2d4c34f18e著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 简介 Swift 语 ...