div盒子最小宽度_Css中实现一个盒子固定宽度，另一个盒子宽度自适应的方法

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

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

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

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

直接上代码

Document

.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;}

方法2

方法2

方法3

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

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

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

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

...

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

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

小技巧 - CSS中:hover调试

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

一个CSS中Z-index的用法

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

CSS 布局实例系列(二)如何通过 CSS 实现一个左边固定宽度、右边自适应的两列布局

最近在百度 IFE 训练营中看见的一道题目: 用两种不同的方法来实现一个两列布局,其中左侧部分宽度固定.右侧部分宽度随浏览器宽度的变化而自适应变化  个人总结出如下三种实现思路: 通过绝对定位实现 S ...

随机推荐

移动端嵌入pdf.js远程请求pdf出现(206)

最近在做移动端的开发,需要嵌入pdf进行预览.看了很多的js组件后选择了pdf.js:使用起来还是比较方便的,至于使用网上有很多的教程. 但在使用过程中出现了如下一个问题(我做的是IOS系统): 问题 ...

Linux下安装和配置JDK与Tomcat(升级版)

在这个版本 Linux下安装和配置JDK与Tomcat(入门版) 的基础上优化升级 1.下载相关软件 apache-tomcat-6.0.37.tar.gz jdk-6u25-linux-i586-r ...

EventBus--出现的问题

--- 1 , EventBus收不到消息问题. 项目中遇到的问题,做搜索商品的时候遇到, 1.情况是一个FragmentActivity包含四个碎片Fragment,在FragmentActivit ...

linq 之 Distinct的使用

public class Product { public string Name { get;set;} public int Code { get; set; } } class ProductC ...

mysql 命令行

drop database mustang; create database mustang; show databases; use database mustang; show tables; s ...

HttpClient 检索与获取过程数据

使用 HttpClient 检索与获取过程数据   对于System.Net.Http的学习(一)——System.Net.Http 简介 对于System.Net.Http的学习(二)——使用 Ht ...

避免循环做SQL操作

经常犯的错误是把一个SQL 操作放置到一个循环中, 这就导致频繁的访问数据库,更重要的是, 这会直接导致脚本的性能低下.以下的例子, 你能够把一个循环操作重置为一个单一的SQL语句. foreach ...

akka-stream与actor系统集成以及如何处理随之而来的背压问题

这几天上海快下了五天的雨☔️☔️☔️☔️,淅淅沥沥,郁郁沉沉.     一共存在四个api: Source.actorRef,返回actorRef,该actorRef接收到的消息,将被下游消费者所消费 ...

SWING中文件的上传

import java.io.File; import java.io.FileInpu ...

Flink - Scheduler

Job资源分配的过程, 在submitJob中,会生成ExecutionGraph 最终调用到, executionGraph.scheduleForExecution(scheduler) 接着,E ...