Css中实现一个盒子固定宽度，另一个盒子宽度自适应的方法

网上方法很多，个人认为以下两种思想是最为常用的。

一种是让第一个盒子脱离文档流，第二个盒子离左边有一定距离。

第二种方法是使用flex布局，不过有一些兼容性问题。

直接上代码

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

</head>

<style type="text/css">

	.div1{background: red;}

	.div2{background: yellow;}

	.way1>.div1{float:left;width: 200px;height:100px;}

	.way1>.div2{margin-left: 200px;height: 100px;}

	.way2{display: flex;}

	.way2>.div1{width: 200px;height: 100px;}

	.way2>.div2{flex: 1;height: 100px;}

	.way3{position: relative;}

	.way3>.div1{width: 200px;height:100px;display: inline-block;}

	.way3>.div2{height: 100px;position:absolute;left: 200px;right:0;display: inline-block;}

</style>

<script>

</script>

<body>

	<!-- 两栏式布局，一方固定，一方自适应 -->

	<!-- 方法1 浮动布局和margin-left,利用了块级元素占满一行的特性-->

	<h1>方法2</h1>

	<div class="way1">

		<div class="div1"></div>

		<div class="div2"></div>

	</div>

	<!-- 方法2 flex布局-->

	<h1>方法2</h1>

	<div class="way2">

		<div class="div1"></div>

		<div class="div2"></div>

	</div>

	<!-- 方法3 display+相对定位绝对定位方法-->

	<h1>方法3</h1>

	<div class="way3">

		<div class="div1"></div>

		<div class="div2"></div>

	</div>

</body>

</html>

Css中实现一个盒子固定宽度，另一个盒子宽度自适应的方法的更多相关文章

  1. 使用CSS中的meta实现web定时刷新或跳转的方法

    这篇文章主要介绍了使用CSS中的meta实现web定时刷新或跳转的方法,比使用JavaScript脚本实现起来更加简单一些,需要的朋友可以参考下 meta源信息功能之页面定时跳转与刷新 几乎所有的网页 ...

  2. CSS实现两列布局，一列固定宽度，一列宽度自适应方法

    不管是左是右,反正就是一边宽度固定,一边宽度自适应. 博客园的很多主题也是这样设计的,我的博客也是右侧固定宽度,左侧自适应屏幕的布局方式. html代码: <div id="wrap& ...

  3. 关于css中hover下拉框的一个bug

    写hover下拉框的时候会遇到一个奇怪的bug,就是下拉框下来的时候会被所在位置的div遮挡,哪怕下拉框使用的absolute,也会被遮挡. 如图: 这个语言选择的下拉框会被下面的div挡住(截图是已 ...

  4. CSS中的盒模型

    CSS的盒模型描述了一些长方形盒子,这些长方形盒子被用来表示文档树中的元素,并根据视觉格式化模型进行定位. 1. 盒子的尺寸 每个盒子都有一个content区域(比如文本.图片等)和可选的包围cont ...

  5. CSS中的元素分类

    CSS中的元素分类 元素是文档结构的基础,在CSS中,每个元素生成了一个包含了元素内容的框(box,也译为"盒子").但是不同的元素显示的方式会有所不同,例如<div> ...

  6. CSS中有关水平居中和垂直居中的解决办法

    CCS中让div等块级元素在父级元素中居中的方法: (1)div{  margin:0 auto   } 该方法只能实现水平的居中,无法实现元素的垂直居中 (2)当div元素的宽高是固定的,然后设置位 ...

  7. 小技巧 - CSS中:hover调试

    在调试CSS的时候,我一般使用Chrome的F12开发者工具,或者FireFox的FireBug直接在元素上面修改好Style后,再写入到CSS中.前几天遇到一个问题就是a:hover,鼠标一移开效果 ...

  8. CSS中inherit指定继承的使用方法和auto的区别

    CSS中的每个属性都有一个特定值"inherit",其含义是指定继承父元素的相应属性,使用inherit一方面在代码上能地表明要继承于父元素的样式属性,另一方面也使子元素继承了那些 ...

  9. 一个CSS中Z-index的用法

    一个CSS中Z-index的用法 CSS教程:彻底掌握Z-index属性     大多数的CSS属性都很容易使用.常常,当您对标记语言的元素使用CSS属性时,产生的结果会随着您刷新页面而立即呈现.而另 ...

随机推荐

  1. 关于Delphi内存表的使用说明

    关于Delphi内存表的使用说明: 1.建立临时表  数据输入是开发数据库程序的必然环节.在Client/Server结构中,客户端可能要输入一批数据后,再向服务器的后台数据库提交,这就需要在本地(客 ...

  2. 深入理解JAVA虚拟机阅读笔记5——Java内存模型与线程

    Java内存模型是定义线程共享的变量的访问规则(实例字段.静态字段和构成数组对象的元素),但不包括线程私有的局部变量和方法参数. 1.主内存与工作内存 Java内存模型规定,所有的变量都必须存储在主内 ...

  3. 【jQuery插件】pagepiling滚屏插件使用

    pagePiling.js 这款 jQuery 插件可以帮助前端开发人员轻松实现全屏滚动效果. 支持所有的主流浏览器,包括IE8+,支持移动设备.下面详细讲解下pagePiling.js的使用步骤. ...

  4. 【uoj#142】【UER #5】万圣节的南瓜灯 乱搞+并查集

    题目描述 给出一张 $n\times m$ 的网格图,两个格子之间有一条双向边,当且仅当它们相邻,即在网格图中有一条公共边. 特殊地,对于 $1\le x\le n​$ ,$(x,1)​$ 和 $(x ...

  5. Avito Cool Challenge 2018 自闭记

    A:n==2?2:1. #include<iostream> #include<cstdio> #include<cmath> #include<cstdli ...

  6. 查看临时表空间占用最多的用户与SQL

     select sess.username, sql.sql_text, sort1.blocks   from v$session sess, v$sqlarea sql, v$sort_usage ...

  7. IO编程（1）-文件读写

    文件读写 读写文件是最常见的IO操作.Python内置了读写文件的函数,用法和C是兼容的. 读写文件前,我们先必须了解一下,在磁盘上读写文件的功能都是由操作系统提供的,现代操作系统不允许普通的程序直接 ...

  8. 解题：SDOI 2010 魔法猪学院

    题面 题外话:神**可持久化左偏树,你谷的人都太神了,学不来 我把这个当做A*模板题的说,先讲一讲个人对A*的理解:如果说普通的BFS是Bellman_Ford,那A*就是一个Dijkstra.以寻找 ...

  9. [SCOI2016] 背单词 （Trie树）

    $pdf\space solution$      link #include<iostream> #include<algorithm> #include<cstrin ...

  10. centos 安装MATLAB ：设置回环设备失败: 没有那个文件或目录

    基本参数:centos 7 x86_64,linux 系统, 安装matlab, 已经下载R2016b_glnxa64.iso 但挂载的时候遇到问题: [root@lf mnt]# mount -o  ...