1.设置元素透明度

opacity:0.5; // w3c

filter:alpha(opacity=50); //IE

2 position:relative; float:left; 一起使用的效果

<div style="border:1px solid #ccc; height:30px; width:420px;">
<div class="sp1">左边。。。。</div>
<div class="sp2">右边。。。</div>
</div>

<div style="border:1px solid #ccc; height:30px; width:420px;">
<div class="sp1" style="left:200px;">左边。。。。</div>
<div class="sp2" style="right:200px;">右边。。。</div>
//这个地方,relative定位后元素还占据以前的位置,同时具有float属性,记住,是占据元素在普通文档流中的位置。
</div>

这样就实现了左右互换的布局!

css相对定位+浮动实现元素位置互换的更多相关文章

  1. SDUT OJ 顺序表应用4:元素位置互换之逆置算法

    顺序表应用4:元素位置互换之逆置算法 Time Limit: 10 ms Memory Limit: 570 KiB Submit Statistic Discuss Problem Descript ...

  2. SDUT OJ 顺序表应用3:元素位置互换之移位算法

    顺序表应用3:元素位置互换之移位算法 Time Limit: 1000 ms Memory Limit: 570 KiB Submit Statistic Discuss Problem Descri ...

  3. js 数组元素位置互换

    如下实现的是,先将数组反转,然后将第二个元素与倒数第三个元素位置互换 ,,,,,,,); arr.reverse(); two=arr.splice(,,); three=arr.splice(-,, ...

  4. css导航条等元素位置不变

    在容器元素中插入 position: fixed; 如果是在微信小程序中,直接用bottom或者top等就可以简单的设置导航条了.

  5. 顺序表应用4-2:元素位置互换之逆置算法(数据改进)(SDUT 3663)

    Problem Description 一个长度为len(1<=len<=1000000)的顺序表,数据元素的类型为整型,将该表分成两半,前一半有m个元素,后一半有len-m个元素(1&l ...

  6. 顺序表应用3:元素位置互换之移位算法(SDUT 3326)

    题解:用一个for,循环m次,每次都把最前面的放到最后面,就可以了. #include <stdio.h> #include <stdlib.h> #include <s ...

  7. 前端CSS - 相对定位,绝对定位,固定定位

    前端CSS - 相对定位,绝对定位,固定定位 1.1 相对定位 position:relative 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置的微调. 也就是说,如果一个盒子想进 ...

  8. 【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响

      一.width:auto和width:100%的区别   1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再 ...

  9. CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响

    ---恢复内容开始--- 一.width:auto和width:100%的区别   1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是 ...

随机推荐

  1. python 自学 1 day

    #!/usr/bin/env python #coding = utf-8 age_of_oldby = 56 user = "fyt" word = "fyt" ...

  2. Surprise团队项目总结

    Surprise团队项目总结 项目实现情况 实现人人模式:2个用户在同一台电脑上进行切磋下棋,即实现五子棋游戏的基本功能 实现人机模式:初级模式已经实现,可以进行人机交互,但是还没达到智能判断下棋点 ...

  3. Android ndk另一种注册方式

    不使用Java_com_xxx方式调用ndk的方式,这种方法的优点是灵活,可配置,不必限制在Java_com_xxx命名依赖中. 步骤如下: 第1步,在JNI初始化方法中调用自定义注册方法,并判断成功 ...

  4. GitLab服务器搭建及配置

    一.服务器环境 操作系统:CentOS release 6.5 (Final) GitLab版本: GitLab-shell:2.0.1 Ruby version: ruby 2.1.2p95 (20 ...

  5. Codeforces Round #169 (Div. 2)

    A. Lunch Rush 模拟. B. Little Girl and Game 因为可以打乱顺序,所以只关心每种数字打奇偶性. 若一开始就是回文,即奇数字母为0或1种,则先手获胜. 若奇数字母大于 ...

  6. 【转载】javascript与C#的语法区别

    由于博主不允许的情况下不允许转载,我在这里只放上链接 http://blog.csdn.net/ranlianjie/article/details/2484139

  7. cocos2dx 3.x tolua 分析

    cocos2dx 3.x 版本已经出到3.10了,终于决定要进行引擎版本升级,c++配合lua进行游戏开发,从3.x版本开始cocos使用了新的tolua方式,由于不懂python,折腾tolua搞的 ...

  8. 解决IAR无法跳转的问题

    在工程的C编译器选项里的预编译添加$TOOLKIT_DIR$\inc可以搞定.

  9. (转) Deep Learning Resources

    转自:http://www.jeremydjacksonphd.com/category/deep-learning/ Deep Learning Resources Posted on May 13 ...

  10. InfoPi运行机制介绍

    整体工作框架 文件目录结构 数据库设计 程序开发框架 注:图片可能被自动缩小,可以另存看大图 1.整体工作框架. 通用户关注绿色竖线左侧的内容即可 2.InfoPi的文件目录结构. 请留意一下cfg目 ...