clearfix的应用
之前遇到一个问题,引用Bootstrap框架时
一行显示四个模块,小屏幕时显示两个模块
当内容一样时,大小屏幕时一样的,但是当其中一个和另一个内容不同时,展示效果就会有错乱
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-3 test01"><span>div1: .col-xs-6 .col-sm-3多点内容多点内容多点内容多点内容多点内容多点内容</span></div>
<div class="col-xs-6 col-sm-3 test01"><span>div2: .col-xs-6 .col-sm-3</span></div>
<div class="col-xs-6 col-sm-3 test01"><span>div3: .col-xs-6 .col-sm-3</span></div>
<div class="col-xs-6 col-sm-3 test01"><span>div4: .col-xs-6 .col-sm-3</span></div>
</div>
</div>
后来查了一下资料,原来是没有清除浮动
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-3 test01"><span>div1: .col-xs-6 .col-sm-3多点内容多点内容多点内容多点内容多点内容多点内容</span></div>
<div class="col-xs-6 col-sm-3 test01"><span>div2: .col-xs-6 .col-sm-3</span></div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3 test01"><span>div3: .col-xs-6 .col-sm-3</span></div>
<div class="col-xs-6 col-sm-3 test01"><span>div4: .col-xs-6 .col-sm-3</span></div>
</div>
</div>
增加了<div class="clearfix visible-xs"></div> 因为只在超小屏幕清除浮动 所以引用visible-xs样式控制
clearfix的应用的更多相关文章
- clearfix的最佳方案----在路上(22)
clearfix的纠结 骨灰级解决办法: .clear{clear:both;height:0;overflow:hidden;} 上诉办法是在需要清除浮动的地方加个div.clear或者br.cle ...
- bootstrap之clearfix
bootstrap之clearfix 在bootstrap辅助类中有那么一类,是这么定义的: 利用clearfix样式清除浮动,但是前提条件是在超小型屏幕上能显示才行(因为其是用visible-xs样 ...
- 解读浮动闭合最佳方案:clearfix
.clear{clear:both;height:0;overflow:hidden;} 上诉办法是在需要清除浮动的地方加个div.clear或者br.clear,我们知道这样能解决基本清浮动问题. ...
- clearfix清除浮动
首先在很多很多年以前我们常用的清除浮动是这样的. 1 .clear{clear:both;line-height:0;} 现在可能还可以在很多老的站点上可以看到这样的代码,相当暴力有效的解决浮动的问题 ...
- ie7 用 clearfix 清除浮动时遇到的问题
<!doctype html> <html> <head> <style> .fr{float:right;display:inline} li{bor ...
- css中clearfix清除浮动的用法及其原理示例介绍
clearfix的定义: .clearfix:after {}{ content: "."; /**//*内容为“.”就是一个英文的句号而已.也可以不写.*/ display: b ...
- css用clearfix清除浮动
本文从http://www.studyofnet.com/news/196.html复制. 本文导读:写css 时总为浮动而烦恼,如果用了浮动,浮动的父层不会跟着浮动框的高度增加而增加,在Fire ...
- [笔记]使用clearfix清除浮动
转载自奶牛博客 .clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { display: table; line-height: 0; ...
- clearfix清除浮动进化史
我想大家在写CSS的时候应该都对清除浮动的用法深有体会,今天我们就还讨论下clearfix的进化史吧. clearfix清除浮动 首先在很多很多年以前我们常用的清除浮动是这样的. .clear{cle ...
随机推荐
- xml解析
config.xml <?xml version="1.0" encoding="UTF-8"?> <prize> <gift&g ...
- TCP/IP协议(一)网络基础知识
参考书籍为<图解tcp/ip>-第五版.这篇随笔,主要内容还是TCP/IP所必备的基础知识,包括计算机与网络发展的历史及标准化过程(简述).OSI参考模型.网络概念的本质.网络构建的设备等 ...
- ngx_http_fastcgi_module模块.md
ngx_http_fastcgi_module ngx_http_fastcgi_module模块允许将请求传递到FastCGI服务器. fastcgi_bind Syntax: fastcgi_bi ...
- javascript中一些常见的兼容性问题
下面是一些Javascript的IE和Firefox(火狐)兼容性的常用例子 1. document.formName.item("itemName") 问题 说明:IE下,可以使 ...
- Centos7安装PHP7
安装依赖 yum updateyum install gcc-c++ libxml2 libxml2-devel openssl openssl-devel bzip2 bzip2-devel lib ...
- 搭建一套自己实用的.net架构(3)【ORM-Dapper+DapperExtensions】
现在成熟的ORM比比皆是,这里只介绍Dapper的使用(最起码我在使用它,已经运用到项目中,小伙伴们反馈还可以). 优点: 1.开源.轻量.小巧.上手容易. 2.支持的数据库还蛮多的, Mysql,S ...
- [LeetCode] Minimum Moves to Equal Array Elements 最少移动次数使数组元素相等
Given a non-empty integer array of size n, find the minimum number of moves required to make all arr ...
- 客户端Socket
导语 java.net.Socket类是JAVA完成客户端TCP操作的基础类.其他建立TCP网络连接的类(如URL,URLConnection和EditorPane)最终会调用这个类的方法.这个类本身 ...
- C#-WebForm-复合控件
学习顺序:1.如何绑定数据 2.如何设置绑定项 3.如何取出数据 1.RadioButton - 单选按钮 RadioButtonList - 单选按钮组 控件中的ID生成了相同名字的 ID.Name ...
- Android源码——AsynTask
AsyncTask<Params, Progress, Result>中三个参数为: Params 输入数据 Progress 过程数据 Result ...