原文: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两列布局——左侧宽度固定，右侧宽度自适应（两种方法）的更多相关文章

  1. CSS两列布局——左侧宽度固定，右侧宽度自适应的3种方法

    1.左侧绝对定位法 直接看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  2. CSS 实现：两栏布局（一边固定，一边自适应）

    ☊[实现要求]:CSS实现左边固定,右边自适应父容器宽度的两栏布局. <body> <div class="left"></div> <d ...

  3. css 关于两栏布局，左边固定，右边自适应

    好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...

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

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

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

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

  6. 转载 html div三列布局占满全屏（左右两列定宽或者百分比、中间自动适应，div在父div中居底）

    原文地址:http://blog.csdn.net/duyelang/article/details/20558899 <p><!DOCTYPE html> <html ...

  7. css之页面两列布局

    两列布局:左边固定,后边自适应 第一种方法:左边的div左浮动或者是绝对定位,右边的div加margin-left:左边div的宽度 html部分 <div class="left&q ...

  8. CSS常用布局方式-两列布局、三列布局

    CSS基础 2.几种布局方式1)table布局 当年主流的布局方式,第一种是通过table tr td布局 示例: <style type="text/css"> ta ...

  9. CSS两列布局的多种方式

    两列布局(一侧固定宽度,一侧自适应),在工作中应该是经常使用到,可以说是前端基础了.这种两列布局的样式是我们在平时工作中非常常见的设计,同时也是面试中要求实现的高频题.很有必要掌握以备不时之需.这里总 ...

随机推荐

  1. IOS 缓存思路

    为了提高程序的响应速度,可以考虑使用缓存(内存缓存\硬盘缓存) 第一次请求数据时内存缓存中没有数据硬盘缓存中没有数据 当服务器返回数据时,需要做以下步骤 使用服务器的数据(比如解析.显示) 将服务器的 ...

  2. Java的Calendar类

    通过Date类我们可以创建并格式化一个日期对象,但是如何才能设置和获取日期数据的特定部分呢?----Calendar类 Calendar类是一个抽象类,在实际使用时实现特定的子类的对象,通过getIn ...

  3. angularjs select下拉搜索框

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. P3174 [HAOI2009]毛毛虫

    题目描述 对于一棵树,我们可以将某条链和与该链相连的边抽出来,看上去就象成一个毛毛虫,点数越多,毛毛虫就越大.例如下图左边的树(图 1 )抽出一部分就变成了右边的一个毛毛虫了(图 2 ). 输入输出格 ...

  5. Kali-linux使用OpenVAS

    OpenVAS(开放式漏洞评估系统)是一个客户端/服务器架构,它常用来评估目标主机上的漏洞.OpenVAS是Nessus项目的一个分支,它提供的产品是完全地免费.OpenVAS默认安装在标准的Kali ...

  6. Kali-linux服务的指纹识别

    为了确保有一个成功的渗透测试,必须需要知道目标系统中服务的指纹信息.服务指纹信息包括服务端口.服务名和版本等.在Kali中,可以使用Nmap和Amap工具识别指纹信息.本节将介绍使用Nmap和Amap ...

  7. sqoop2启动client异常

    java环境:  java version "10.0.1" ,启动sqoop-shell端或者是sqoop-client端异常,异常如下: [root@hadoop1 home] ...

  8. git用户限制ssh登录服务器

    服务器额外的防范措施: 搭建git服务器后通常会建立一个git账户,其它人共用这个账户来克隆或推送数据到git仓库中,通常也只需要这个功能,但是如果不加限制,那么其它人可以通过这个git账户登录到主机 ...

  9. Week7:SVM难点记录

    1.函数dataset3Params(),如何计算模型估计偏差的? model=svmTrain(X,y,c_array,@(x1,x2)gaussianKernel(x1,x2,sigma_arra ...

  10. PAT——1032. 挖掘机技术哪家强

    为了用事实说明挖掘机技术到底哪家强,PAT组织了一场挖掘机技能大赛.现请你根据比赛结果统计出技术最强的那个学校. 输入格式: 输入在第1行给出不超过105的正整数N,即参赛人数.随后N行,每行给出一位 ...