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