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

就是这样。

原文地址:https://www.cnblogs.com/foxcharon/p/10439177.html

时间: 2024-11-10 15:43:01

css : 使用浮动实现左右各放一个元素时很容易犯的错误的相关文章

[css]《css揭秘》学习(四)-一个元素实现内圆角边框

如图所示的圆角边框有两个元素很好实现,用一个元素也可以实现. 1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>灵活的背景定位2</title> 5 <style type="text/css"> 6 div{ 7 max-width: 10em; 8 border-radius: .8em; 9 padding: 1em; 10 margi

css系列(布局):实现一个元素在浏览器中水平、垂直居中的几个方案

在开发中偶遇需要一个元素垂直居中的需求,之前都是水平居中,垂直居中使用的比较少,经过一通研究,选择了几种相对比较实用的方案分享,抛砖引玉,如有遗漏不足,还望不吝指正. 方案一(IE7下该方案无法实现垂直居中): 通过设置父级的的块属性实现,将父级元素手动转换位display:table-cell属性,然后使用表格的vertical-align: middle属性,实现元素的垂直居中,子元素继续使用margin:0 auto;实现水平居中即可 代码如下: 1 <!DOCTYPE html> 2

jquery 实现重复点击一个元素时不重复执行效果

这需要用到jquery的stop方法 实例 停止当前正在运行的动画: $("#stop").click(function(){ $("#box").stop(); }); 定义和用法 stop() 方法停止当前正在运行的动画. 语法 $(selector).stop(stopAll,goToEnd) 参数 描述 stopAll 可选.规定是否停止被选元素的所有加入队列的动画. goToEnd 可选.规定是否允许完成当前的动画. 该参数只能在设置了 stopAll 参

DIV CSS制作网页时易犯的错误总结

CSS+DIV是网站标准(或称"WEB标准")中常用的术语之一,通常 为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用css+div的 方式实现各种定位.应用应用DIV+CSS编码时很容易犯一些错误.本文列举了一些常见的错误: 1. 检查HTML元素是否有拼写错误.是否忘记结束标记 Webjx.Com 即使是老手也经常会弄错div的嵌套关系.可以用dreamweaver的验证功能检查一下有无错误. 网页教学

css实现菜单栏效果以及用hover属性去控制另一个元素样式的问题

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>浮动</title> <style type="text/css"> *{ margin: 0; padding: 0; } .one{ text-decoration: none; color:red; font-size: 20px; /*position: r

二分查找、二分查找大于等于key的第一个元素、二分查找小于等于key的最后一个元素

二分查找很简单,二分查找的变形需要注意一些细节. 1.当找大于等于key的第一个元素,或者查找小于等于key的最后一个元素时, 循环条件是 low < high,这和基本的二分查找不同, 但需要在循环退出的时候,判断是否满足条件: 2.如果是找最后一个满足条件的情况, 下限移动时不能用 low=mid+1:而应该用 low=mid: 此时,mid计算时应该用 mid=(low+high+1)/2, 保证 最后low.high相差1时不会陷入死循环, 循环退出后,下限可能是结果: 3.如果是找第一

通俗易懂的CSS的浮动float详解

目录: 1. CSS浮动属性float详解 2. CSS常见页面布局 3. CSS浮动清除和清除浮动的几种方法 4. 高度塌陷的产生条件和解决方法 ## CSS浮动属性float详解 *首先,我们需要了解什么是浮动?浮动是指(浮动的特点):- 将元素排除在普通流之外,即元素将脱离标准文档流.- 元素将不在页面占用空间.- 将浮动元素放置在包含框的左边或者右边.- 浮动的框可以向左或者向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止.- 经常使用它来实现特殊的定位效果. float的属性

CSS float浮动的深入研究、详解及拓展(一)

概念目录 个人感悟之CSS代码的情感化思维 个人观点之浮动的意义仅仅是文字环绕显示而已 个人观点之浮动的本质是"包裹及破坏" 个人观点之目前大多数浮动应用都不是浮动应该做的 个人观点之浮动其实是个魔鬼.混球 一.引言 你我看待事物的方式不同,价值取向也不同,因为我们有着不同的世界观,价值观.这种世界观的差异不仅仅体现在实际的生活中,也反映在代码上.你我看待代码的方式,或者说是代码在我们情感层面的位置是不一样的,我这里说的是情感层面,与逻辑无关,与算法无关(虽然算法受情感影响).这种看待

css清除浮动的方法总结

在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了,下面总结8种清除浮动的方法,测试已通过 ie chrome firefox opera,需要的朋友可以参考下 清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了.解决浮动引起的问题有多种方法,但有些方法在浏览器兼容性方面还有问