<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
width: 400px;
border: 1px solid black;
overflow:hidden; <主盒子要消除浮动给否则包不住里面的内荣>
}
.let{
float: left;
background-color: red;
}
.right{
float: right;
background-color: blue;
}
h2{
float: left; <要使得h2不盛满一行就得给h2加一个浮动>
margin: 0;
height: 30px;
}
</style>
<!--
解决方案:float: left;
-->
</head>
<body>
<div class="box">
<div class="let">
<h2>左边</h2> </div>
<div class="right">
<h2>右边</h2>
</div> </div>
</body>
</html>

兼容性,float的更多相关文章

  1. js实现省市区联动

    先来看看效果图吧,嘻嘻~~~~~~~~~~~~~~~~~~~· 代码在下面: 示例一: html: <!DOCTYPE html> <html> <head> &l ...

  2. ie浏览器float兼容性

    在最近的项目中,遇到label.input.和button显示同一行,需求如下 实现代码,框架为react.js <label class="formGrid__label requi ...

  3. float、定位、inline-block、兼容性需注意的特性总结

    inline-block 特性: 1.块在一排显示 2.内联支持宽高 3.默认内容撑开宽度 4.标签之间的换行间隙被解析(问题)[相当字体大小的一半] 5.ie6 ie7不支持块属性标签的inline ...

  4. 前端学习笔记之css清除浮动float的七种常用方法总结和兼容性处理

    在清除浮动前我们要了解两个重要的定义: 浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来. 高度塌陷:浮动元素父元素高度自适应(父元素不写高度时,子元素写了浮 ...

  5. css清除浮动float的七种常用方法总结和兼容性处理

    在清除浮动前我们要了解两个重要的定义: 浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来. 高度塌陷:浮动元素父元素高度自适应(父元素不写高度时,子元素写了浮 ...

  6. 对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...

  7. IE7,6与Fireofx的CSS兼容性处理方法集结

    CSS对浏览器的兼容性有时让人很头疼,尤其是对于IE6这个问题多多的浏览器版本,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码 ...

  8. CSS中一些常见的兼容性问题

    CSS中一些兼容性问题就是浏览器兼容,而这些浏览器兼容问题主要是Ie和FF之间的争斗. CSS hack中的一些事: 我们为了让页面形成统一的效果,要针对不同的浏览器或不同版本写出对应可解析的CSS样 ...

  9. CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

随机推荐

  1. c语言-扑克牌小魔术

    /************************************* Copyright(C) 2004-2005 vision,math,NJU. File Name: guess_card ...

  2. Robotium第一天:搭建环境测试微信

    因为要在命令行下运行一些android的工具,所以配置一些环境变量会比较方便: 遇到问题: java -jar re-sign.jar 出现提示android路径没有配置好: 需要配置如下: 配置AN ...

  3. 在Java中Arrays工具类实现功能的六种方法

    使用Arrays工具类,要先导入包即:import.java.util.Arrays 以下是实现六种功能的方法: 1.比较两个数组值是否相等: 结果为true.false.(布尔型不能比较) int ...

  4. STM32 一通道单次转换

    之前弄过ADC连续转换,还配了DMA传输,项目上不希望这样做,因为有其他设备用到DMA传输,就会不停的抢占优先级,效率低. 按照需求改成ADC单次转换,非连续,用的时候只需调下函数执行一次转换即可. ...

  5. 《JS权威指南学习总结--3.1数字》

    3.1数字 内容要点: 一.数字直接量:当一个数字直接出现在JS程序中,我们称之为数字直接量. 二.JS中的算术运算 Math.pow(2,53)      // => 900719925474 ...

  6. KMP算法类习题——字符串匹配

    Description For each prefix with length P of a given string S,if S[i]=S[i+P] for i in [0..SIZE(S)-p- ...

  7. HDU1711:Number Sequence

    Problem Description Given two sequences of numbers : a[1], a[2], ...... , a[N], and b[1], b[2], .... ...

  8. read file in a single line

    String text= new Scanner(File('input.txt')).useDelimiter("\\A").next(); java version!

  9. eclipse关联源码的方法

    1.在项目的libs目录下,新建一个android-support-v4.jar.properties文件 2.打开android-support-v4.jar.properties,编辑. 输入源码 ...

  10. A*搜寻算法(A星算法)

    A*搜寻算法[编辑] 维基百科,自由的百科全书 本条目需要补充更多来源.(2015年6月30日) 请协助添加多方面可靠来源以改善这篇条目,无法查证的内容可能会被提出异议而移除. A*搜索算法,俗称A星 ...