<!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. html+javascript实现可拖动可提交的弹出层对话框效果

    本文为大家介绍下使用html+javascript实现可拖动弹出层.对话框.可提交,具体代码如下,感兴趣的朋友可以参考下,希望对大家有所帮助 <!DOCTYPE HTML PUBLIC &quo ...

  2. hdu_5800_To My Girlfriend(变种背包)

    题目链接:hdu_5800_To My Girlfriend 题意: 给你n和物品和一个重量m,让你求 题解: To My Girlfriend 令dp[i][j][s1][s2]表示前i个物品填了j ...

  3. IoC容器Autofac正篇之类型注册(五)

    Autofac类型注册 类型注册简单的从字面去理解就可以了,不必复杂化,只是注册的手段比较丰富. (一)类型/泛型注册 builder.RegisterType<Class1>(); 这种 ...

  4. 读苹果开发文档时遇到瓶颈，转而花2天看了Objc基本语法

    根据这篇博客中列出的文章开始看Objc基本语法: http://blog.hellolucky.info/articles/ios-beginner-ios-development/ 看完以后,明白多 ...

  5. Nicholas C. Zakas谈怎样才能成为优秀的前端工程师

    黄色阴影为业务,红色字体为哲学 昨天,我负责了Yahoo!公司组织的一次面试活动,感触颇深的是其中的应聘者提问环节.我得说自己对应聘者们提出的大多数问题都相当失望.我希望听到一些对在Yahoo!工作充 ...

  6. 笨方法学python--字符串和文本

    1print 变量 abc = False joke_string = "Isn't that joke so funny?! %r" print joke_string %abc ...

  7. cssText笔记

    style.cssText 用来获取/设置元素的样式 设置: <div id= "a" style= "background: red;"> doc ...

  8. Tree Restoring

    Tree Restoring Time limit : 2sec / Memory limit : 256MB Score : 700 points Problem Statement Aoki lo ...

  9. Sublime Text 3 安装使用

    机器比较老,运行Pycharm等卡死,所以选择Sublime,非常流畅. 安装 版本3103 官网下载安装 注册码: —– BEGIN LICENSE —–Nicolas HennionSingle ...

  10. mysql 索引相关

    引言: MYSQL由于其免费和开源的性质,在项目中用处广泛.大家都知道,一个MySQL数据库能够储存大量的数据,如果要在大量的数据中查找某一个数据,如果使用全表检索的话,即费时间又费力气,这时,就需要 ...