<!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. 在命令提示符下，怎么查看windows开启了哪些服务？

    net use \\ip\ipc$ " " /user:" " 建立IPC空链接 net use \\ip\ipc$ "密码" /user: ...

  2. 让你瞬间萌比的35个python小技巧

    今天在看python算法的时候,看到一篇关于python的小技巧.瞬间萌比了,原来python也可以这样玩,太神奇了.萌比的是原来这么简单的东西自己都不知道,虽然会写.废话不多说了,开始上菜. 1.拆 ...

  3. repeat帮定删除按钮事件，并且生成去人删除提示

    前台 <ItemTemplate> <tr> <td> <asp:LinkButton ID="LinkButton_cancel" On ...

  4. 客户端 HttpUtils.java

    package com.http.post; import java.io.ByteArrayOutputStream; import java.io.IOException; import java ...

  5. bingo 跨action异步获取参数

    html(定时器模拟异步) <script> setTimeout(function(){ window.teacInfo = {a:1,b:2}; },2000);</script ...

  6. ckediter

    ckediter ##<link rel='stylesheet' href='/css/index.css' /> <script type="text/javascri ...

  7. swfupload在chrome中点击上传图片按钮无反应的解决办法

    chrome 22.0.XXXXX dev版上传图片按钮点击无反应原因:是GOOGLE的内建Flash PPAPI外挂所导致的. 问题原因: 由于Google浏览器(Chrome),在最新测试版22. ...

  8. Java学习笔记之I/O

    package com.chinasofti.javase20160819; import java.io.BufferedReader; import java.io.BufferedWriter; ...

  9. java设计模式案例详解:观察者模式

    观察者模式的应用场景: 1. 对一个对象状态的更新,需要其他对象同步更新,而且其他对象的数量动态可变. 2. 对象仅需要将自己的更新通知给其他对象而不需要知道其他对象的细节. 举个例子说明,这个例子讲 ...

  10. 初学.net 网页打开过程

    一个网页打开的过程 1.进入控制器里的方法里  控制器的命名必须以Controll结尾前面的名字要和view层的命名一致 2.控制器完了以后 就进入view层对应的视图里 3.视图里调用model   ...