css : 使用浮动实现左右各放一个元素时很容易犯的错误
比如说,有一个div,我想在左侧和右侧各方一个元素。
如果不想用flex,那就只能用浮动了。
...
<div class="up clearfix">
<h6>用户添加</h6>
<div class="float right">
<Button >新增</Button>
</div>
</div>
...
咋一看并没有问题,对不对?
但是这样不行:想挂在右侧的那个元素会被挤下去。
只要把浮动元素放在非浮动元素前面就行了。
...
<div class="up clearfix">
<div class="float right">
<Button >新增</Button>
</div>
<h6>用户添加</h6>
</div>
...
就是这样。
css : 使用浮动实现左右各放一个元素时很容易犯的错误的更多相关文章
- jquery 实现重复点击一个元素时不重复执行效果
jquery 实现重复点击一个元素时不重复执行效果 这需要用到jquery的stop方法 实例 停止当前正在运行的动画: $("#stop").click(function(){ ...
- [css]《css揭秘》学习(四)-一个元素实现内圆角边框
如图所示的圆角边框有两个元素很好实现,用一个元素也可以实现. <html> <head> <meta charset="utf-8"> < ...
- css系列(布局):实现一个元素在浏览器中水平、垂直居中的几个方案
在开发中偶遇需要一个元素垂直居中的需求,之前都是水平居中,垂直居中使用的比较少,经过一通研究,选择了几种相对比较实用的方案分享,抛砖引玉,如有遗漏不足,还望不吝指正. 方案一(IE7下该方案无法实现垂 ...
- CSS样式----浮动(图文详解)
标准文档流 宏观地讲,我们的web页面和photoshop等设计软件有本质的区别:web页面的制作,是个"流",必须从上而下,像"织毛衣".而设计软件,想往哪里 ...
- css之浮动
标准文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 标准流的微 ...
- CSS的浮动(float)
问题:在练习过程中,发现div1浮动后,它下面的div被覆盖住了. 解决方案:清除该div1的浮动. 关于CSS的浮动 1.div是块级元素,独占一行 2.浮动可以理解为让某个div元素脱离标准流,漂 ...
- 详说 CSS 清除浮动
转自:http://kayosite.com/remove-floating-style-in-detail.html 浮动,从诞生那天起,它就是个特别的属性——既为网页布局带来新的方法,却又随之产生 ...
- CSS布局--浮动与清除
浮动和清除 浮动和清除是页面布局的重要属性.浮动的意思是指将元素从常规的文档流中取出来. 当你浮动一个元素的时候,浮动的元素会被浏览器尽量的往上放,能放多高就放多高,一直到某个元素的边界为止. 浮动元 ...
- 第五节 HTML&CSS -- 关于浮动和清除浮动的解说,以及两个大坑不要踩
1.随便唠叨几句 这一节课我会对浮动元素和怎样清除浮动相关的技术进行一个讲解,同时,我会列举一些我们前端开发中常见的坑,希望大家以后不要在这些地方犯错.在开始今天的课程之前,有一个东西我需要先讲一 ...
随机推荐
- JavaWeb的登陆与注销功能
JavaWeb 登录与注销 大致流程 一般我们在Web应用中 登录页面一般是以 login.jsp的首页 大致流程如下: 当我们在前台写入用户名和密码之后,点击登录按钮 会将表单提交给一个LoginS ...
- drf之序列化组件(一):Serializer
序列化组件:Serializer.ModelSerializer.ListModelSerializer Serializer 偏底层 ModelSerializer 重点 List ...
- 搞定ReentrantReadWriteLock 几道小小数学题就够了
| 好看请赞,养成习惯 你有一个思想,我有一个思想,我们交换后,一个人就有两个思想 If you can NOT explain it simply, you do NOT understand it ...
- 【Spring】@Transactional 闲聊
菜瓜:上次的AOP理论知识看完收获挺多的,虽然有一个自定义注解的demo,但还是觉得差点东西 水稻:我也觉得没有跟一遍源码还是差点意思,这次结合@Transactional注解深入源码看一下 菜瓜:事 ...
- ajax前后端交互原理(6)
6.XMLHttpRequest对象 XMLHttpRequest 是一个 API,它为客户端提供了在客户端和服务器之间传输数据的功能.它提供了一个通过 URL 来获取数据的简单方式,并且不会使整个页 ...
- CListCtrl 控件即使跟新数据,即时刷新以及属性设置
用 m_CtrItem.Update( i );来即使跟新每行的数据,因为有时用某些函数如SetItemText()来设置某一行一列的数据是,控件上面的显示数据没有即使跟新,这是就有update来跟新 ...
- linux 测试端口是否可通
windows上一般用telnet 如telnet ip port linux上可以用telnet,跟windows一样 telnet ip port 也可以用wget:如:wget ip:port ...
- JQuery 优缺点略谈
1.jQuery实现脚本与页面的分离 ; 2.最少的代码做最多的事情; 3.性能; 在大型JavaScript框架中,jQuery对性能的理解最好.尽管不同版本拥有众多新功能,其最精简版本只有18KB ...
- Typography convention
1 h1 Chapter title centered,number three in bold,used ##. 1.1 h2 The chapter is a section, and the s ...
- CentOS下安装python3环境及pypy环境
安装前基础环境 1. win7虚拟机CentOS7.6系统 2. 网络环境通过NAT方式 3. 已经配置到yum仓库并系统自带有python2.7 安装前准备 1. python3.6.5源码包:ht ...