比如说,有一个div,我想在左侧和右侧各方一个元素。

如果不想用flex,那就只能用浮动了。

  1. ...
  2. <div class="up clearfix">
  3. <h6>用户添加</h6>
  4. <div class="float right">
  5. <Button >新增</Button>
  6. </div>
  7. </div>
  8. ...

咋一看并没有问题,对不对?

但是这样不行:想挂在右侧的那个元素会被挤下去。

只要把浮动元素放在非浮动元素前面就行了。

  1. ...
  2. <div class="up clearfix">
  3. <div class="float right">
  4. <Button >新增</Button>
  5. </div>
  6. <h6>用户添加</h6>
  7. </div>
  8. ...

就是这样。

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

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

    jquery 实现重复点击一个元素时不重复执行效果 这需要用到jquery的stop方法 实例 停止当前正在运行的动画: $("#stop").click(function(){ ...

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

    如图所示的圆角边框有两个元素很好实现,用一个元素也可以实现. <html> <head> <meta charset="utf-8"> < ...

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

    在开发中偶遇需要一个元素垂直居中的需求,之前都是水平居中,垂直居中使用的比较少,经过一通研究,选择了几种相对比较实用的方案分享,抛砖引玉,如有遗漏不足,还望不吝指正. 方案一(IE7下该方案无法实现垂 ...

  4. CSS样式----浮动(图文详解)

    标准文档流 宏观地讲,我们的web页面和photoshop等设计软件有本质的区别:web页面的制作,是个"流",必须从上而下,像"织毛衣".而设计软件,想往哪里 ...

  5. css之浮动

    标准文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 标准流的微 ...

  6. CSS的浮动(float)

    问题:在练习过程中,发现div1浮动后,它下面的div被覆盖住了. 解决方案:清除该div1的浮动. 关于CSS的浮动 1.div是块级元素,独占一行 2.浮动可以理解为让某个div元素脱离标准流,漂 ...

  7. 详说 CSS 清除浮动

    转自:http://kayosite.com/remove-floating-style-in-detail.html 浮动,从诞生那天起,它就是个特别的属性——既为网页布局带来新的方法,却又随之产生 ...

  8. CSS布局--浮动与清除

    浮动和清除 浮动和清除是页面布局的重要属性.浮动的意思是指将元素从常规的文档流中取出来. 当你浮动一个元素的时候,浮动的元素会被浏览器尽量的往上放,能放多高就放多高,一直到某个元素的边界为止. 浮动元 ...

  9. 第五节 HTML&CSS -- 关于浮动和清除浮动的解说,以及两个大坑不要踩

    1.随便唠叨几句   这一节课我会对浮动元素和怎样清除浮动相关的技术进行一个讲解,同时,我会列举一些我们前端开发中常见的坑,希望大家以后不要在这些地方犯错.在开始今天的课程之前,有一个东西我需要先讲一 ...

随机推荐

  1. 数据库事务(1)----- JDBC事务与JTA事务

    数据库事务(一)- JDBC事务与JTA事务 本文主要对JDBC事务与JTA事务做一个简单介绍. 1. 数据库事务概念 一个数据库事务通常包含对数据库进行读或写的一个操作序列.它的存在包含有以下两个目 ...

  2. Spring Boot]SpringBoot四大神器之Actuator

    论文转载自博客: https://blog.csdn.net/Dreamhai/article/details/81077903 https://bigjar.github.io/2018/08/19 ...

  3. StringEscapeUtils防止xss攻击详解

    StringUtils和StringEscapeUtils这两个实用类. 1.转义防止xss攻击 1.转义可以分为下面的几种情况 第一用户输入特殊字符的时候,在提及的时候不做任何处理保持到数据库,当用 ...

  4. redis基础二----操作set数据类型

    set集合是无序的,不能存在重复元素 bbb吃重复元素,是不能添加成功的 2 接下来分析zset,是有序的,你在添加的时候要指定元素的序列号 上面的 3 4 5 6 就是指定的元素的序列号 withs ...

  5. 3、struct2的常见配置

    1.在eclipse中如何复制一个工程作为一个新的工程 在struct.xml中: <result name="success">/login_sucess.jsp&l ...

  6. leetcode125. 验证回文串 python 简单

    125. 验证回文串 难度简单     给定一个字符串,验证它是否是回文串,只考虑字母和数字字符,可以忽略字母的大小写. 说明:本题中,我们将空字符串定义为有效的回文串. 示例 1: 输入: &quo ...

  7. Docker部署Python项目

    简介 软件开发最大的麻烦事之一就是环境配置,操作系统设置,各种库和组件的安装.只有它们都正确,软件才能运行.如果从一种操作系统里面运行另一种操作系统,通常我们采取的策略就是引入虚拟机,比如在 Wind ...

  8. SQL注入之MySQL常用的查询语句

    MySQL是一种使用很广的数据库,大部分网站都是用MySQL,所以熟悉对MySQL数据库的注入很重要. 首先来说下MySQL注入的相关知识点 在MySQL5.0版本之后,MySQL默认在数据库存放一个 ...

  9. Oracle的number数据类型

    https://www.cnblogs.com/oumyye/p/4448656.html NUMBER ( precision, scale) precision表示数字中的有效位;如果没有指定pr ...

  10. 入门大数据---Hbase 过滤器详解

    一.HBase过滤器简介 Hbase 提供了种类丰富的过滤器(filter)来提高数据处理的效率,用户可以通过内置或自定义的过滤器来对数据进行过滤,所有的过滤器都在服务端生效,即谓词下推(predic ...