Reference:

http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3?answertab=votes#tab-top

.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
} and coomment trick for extra space:
<div class="row">
<div class="col-xs-5 col-md-3 col-lg-1 vcenter">
<div style="height:10em;border:1px solid #000">Big</div>
</div><!--
--><div class="col-xs-5 col-md-7 col-lg-9 vcenter">
<div style="height:3em;border:1px solid #F00">Small</div>
</div>
</div> TODO:
flexbox

HTML: vertical algin Big/small div in same row (bootstrap)的更多相关文章

  1. Codeforces Round #691 (Div. 2) C. Row GCD (数学)

    题意:给你两个数组\(a\)和\(b\),对于\(j=1,...,m\),找出\(a_1+b_j,...,a_n+b_j\)的\(gcd\). 题解:我们很容易的得出\(gcd\)的一个性质:\(gc ...

  2. html div内第二行文字显示不下的时候才用省略号代替 css实现

    有时候文字太多,但为了美观想要在第二行的时候才显示省略号,而不是第一行超出马上就出现省略号 下面是css代码: overflow:hidden;text-overflow: ellipsis;//显示 ...

  3. CSS布局之div交叉排布与底部对齐--flex实现

    最近在用wordpress写页面时,设计师给出了一种网页排布图样,之前从未遇到过,其在电脑上(分辨率大于768px)的效果图如下: 而在手机(分辨率小于等于768px)上要求这样排列: 我想到了两种方 ...

  4. 像table一样布局div

    原文:http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/ 下面是我翻译的内容,是根据我对文章的理解意译的 ...

  5. 点击其它地方隐藏div/事件冒泡/sweet-alert阻止冒泡

    点击document时把div隐藏,但点击div时阻止点击事件冒泡到document,从而实现“点击文档其它地方隐藏div,点击div本身不隐藏”.js代码如下:$("#div") ...

  6. CSS技巧!像table一样布局div

    摘自:http://www.cnblogs.com/hnyei/archive/2011/09/19/2181442.html 许多网页设计师都喜欢,将两个或者多个容器等高的并排放置,并在里面展示每个 ...

  7. 2014年---移动端webapp个人年度总结

    我今年是由零基础开始入门的,刚好我第一家公司入职后就马上让我接手做ipad版的专题app了.(一入门就是移动端开发,是幸运也是艰辛的开始). 我是自学前端的,当然,对Bootstrap,JQuery  ...

  8. 解决UC浏览器或微信浏览器上flex兼容问题

    在UC浏览器上使用display:flex;时会不起作用,要加上兼容性写法,如下 display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ disp ...

  9. 利用css3实现超出文本指定行数与省略号效果

    <style> .text1 {/*单行*/ width:200px; overflow:hidden; text-overflow:ellipsis; -o-text-overflow: ...

随机推荐

  1. Python学习笔记——条件和循环

    1.条件表达式 >>> x = 3 >>> x = 1 if x<3 else 2 >>> x 2 2.for语句用于序列类型 <1& ...

  2. 安卓贴图源码--->单点触控.多点触控.类似in/百度魔图

    效果如图: 类似in,百度魔图,的贴图功能  核心的地方:单/多点 旋转缩放后记录各个顶点小图标位置 引用这里 http://blog.csdn.net/xiaanming/article/detai ...

  3. NPM

    参考资料: 淘宝NPM

  4. ThinkPHP真正疑难问题笔记

    如何选择线程安全版本还是非线程安全版本: http://www.cnblogs.com/Alight/p/3389113.html(看webserver处理请求时, 使用的是多线程的方式还是 多进程的 ...

  5. JavaScript方法call、apply、caller、callee、bind的使用详解及区别

    一.call 方法 调用一个对象的一个方法,以另一个对象替换当前对象(其实就是更改对象的内部指针,即改变对象的this指向的内容). 即  “某个方法”当做“指定的某个对象”的“方法”被执行. Js代 ...

  6. OpenVPN使用用户名/密码验证方式

    OpenVPN推荐使用证书进行认证,安全性很高,但是配置起来很麻烦.还好它也能像pptp等vpn一样使用用户名/密码进行认证. 不管何种认证方式,服务端的ca.crt, server.crt, ser ...

  7. %格式化和format格式化--python

    格式符 %[(name)][floags][width].[precision]typecode (name) 可选,用于选择指定的key flags 可选,可提供的值有: · + 右对齐,整数前加正 ...

  8. nginx error_log 错误日志配置说明

    nginx的error_log类型如下(从左到右:debug最详细 crit最少): [ debug | info | notice | warn | error | crit ] 例如:error_ ...

  9. 修改hosts文件,修改后不生效怎么办

    当你在打开浏览器的情况下修改hosts文件时,关闭浏览器时系统才会释放掉hosts文件占用的那部分内存,我们再次打开浏览器访问就发现已经生效了. ps:ipconfig /flushdns     # ...

  10. orm 语法 数据库连接、建表、增删改查、回滚、单键关联 、多键关联、三表关联

    1.数据库连接, #!usr/bin/env/python # -*- coding:utf-8 -*- # from wangteng import sqlalchemy from sqlalche ...