让div占据父元素剩下的所有位置
场景模拟:
现在有一个父容器,里面有俩个div,左边的要给一个固定的200px的宽度,父容器剩下的宽度都归右边的div该怎么完成?
HTML代码:
<div class="wrap">
<div class="left"></div>
<div class="right">CSDN吴小迪</div>
</div>
解决问题的方法:
一:CSS3弹性盒
CSS代码:
.wrap{
display: flex;
background: green;
}
.left{
height: 100px;
width: 200px;
background: yellow;
}
.right{
height: 100px;
flex: 1;
background: orangered;
}
二:给左边元素一个浮动
CSS代码:
.left{
height: 100px;
width: 200px;
background: yellow;
float: left;
}
.right{
height: 100px;
background: orangered;
}
俩个代码实现的效果是一样的,效果图如下:
让div占据父元素剩下的所有位置的更多相关文章
- css 设置div基于父元素宽度的宽高相等的样式
1. 前言 在移动开发中,有时候需要设置一个宽高相等的div,并且为了使它能够适配更多的屏幕,于是需要让它的宽高和屏幕宽高成一定的比例.这里将提供一个css的解决方案,让一些后端开发不用再写繁琐的js ...
- position:fix相对父元素定位
大家都知道,当position的值为fix时,生成绝对定位的元素,相对于浏览器窗口进行定位. 它常常应用的场合是,当下拉滚动条时固定导航栏到顶部,将广告固定在页面两侧或浏览器中间. 如果需要将导航栏d ...
- 关于自适应屏幕,设置子元素浮动,父div不能包裹子div,子元素中内容溢出的问题。
设置HTML适应不同分辨率的屏幕. 需求结构如下: HTML结构代码如下(只是其中一条): <body> <div class="content">< ...
- div宽度设置width:100%后再设置padding或margin超出父元素的解决办法
div宽度设置width:100%后再设置padding或margin超出父元素的解决办法 一.总结 一句话总结:直接加上box-sizing:border-box;即可解决上述问题. 1.box-s ...
- 子div用了float浮动之后,如何撑开父元素,让父元素div自动适应高度的问题
方法一: html: <div id="all1"> <div id="left1">1</div> <div id= ...
- 父元素高度不确定,子元素左右等高的div布局
上一篇介绍了实现几个div并排居中点这里,但是指定了高度,这篇文字主要说一下父元素高度不确定,子元素左或右高度不确定且高度相同布局div盒子 三个div盒子如下 <div class=" ...
- 如何禁用事件的浮升(div的子元素的点击事件会触发父元素的点击事件)
<div onclick="alert();"> <div onclick="alert();"></div> </d ...
- css中:如何让一个图片(不知道宽高,宽高可能比父元素div大),在父元素div内部水平垂直居中,并且不溢出父元素div,且图片不拉伸变形(可等比例缩小)?
欢迎进入:http://www.jscwwd.com/article/list/%E5%85%A8%E9%83%A8 效果图: 不管父元素的宽高怎么变化,图片都是水平垂直居中的,并且不溢出父元素. 注 ...
- margin折叠-从子元素margin-top影响父元素引出的问题
正在做一个手机端电商项目,顶部导航栈的布局是一个div包含一个子div,如果给在正常文档流中的子div一个垂直margin-top,神奇的现象出现了,两父子元素的边距没变,但父div跟着一起往下走了! ...
随机推荐
- YAOI Round #3 题解
前言 比赛链接: Div.1 : http://47.110.12.131:9016/contest/7 Div.2 : http://47.110.12.131:9016/contest/8 Div ...
- 脱离OBDeploy工具,手工部署OceanBase方法
[简介] OBDeploy是OceanBase集群部署的工具,可以通过简单的几行命令,就能快速的进行OceanBase部署.但对于初学者来讲,可能会比较困惑,Deploy到底做了哪些事情?里面的具体步 ...
- python 查看导入模块的函数和方法
将twain.pyd复制到Python27 \ Lib \ site-packages 首先 import XXX(包括pyd的文件名)print(dir(XXX))print(help(xxx)) ...
- 基于SSM酒店管理系统mysql版本(前后台)
介绍:spring,springmvc,mybatis,mysql,eclipse 截图: 数据库表:CREATE TABLE `account` ( `id` int(11) NOT NULL AU ...
- 使用宝塔配置laravel站点时,遇到open_basedir restriction in effect. 原因与解决方法
今天一位朋友在linux服务器部署thinkphp5的时候PHP报了这个错误,如下: Warning: require(): open_basedir restriction in effect. F ...
- 浅谈树模型与集成学习-从决策树到GBDT
引言 神经网络模型,特别是深度神经网络模型,自AlexNet在Imagenet Challenge 2012上的一鸣惊人,无疑是Machine Learning Research上最靓的仔,各种进 ...
- upload-lab 靶场实战
文件上传/下载 漏洞 冲冲冲,好好学习 2020.02.13 淦靶场之前,先来点知识铺垫铺垫. 文件上传漏洞 前端Js绕过. MIME类型绕过 后缀名大写写绕过 / php4 .php5 00截断 覆 ...
- 通过比较rgb破解滑动验证码
目标url:信用中国(广东中山)行政处罚 /** * base64转BufferedImage * * @param base64 * @return */ public static Buffere ...
- CF559B Equivalent Strings TJ
前言 题目传送门 正解:模拟,递归. 考试的 T4,还是想复杂了 qwq. 这题不要用 STL,容易 \(\texttt{TLE}\)!! 题意简述 翻译够简了. 对了给一下样例解释的翻译: 第一个样 ...
- Clickhouse Docker集群部署
写在前面 抽空来更新一下大数据的玩意儿了,起初架构选型的时候有考虑Hadoop那一套做数仓,但是Hadoop要求的服务器数量有点高,集群至少6台或以上,所以选择了Clickhouse(后面简称CH). ...