HTML: vertical algin Big/small div in same row (bootstrap)
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)的更多相关文章
- Codeforces Round #691 (Div. 2) C. Row GCD (数学)
题意:给你两个数组\(a\)和\(b\),对于\(j=1,...,m\),找出\(a_1+b_j,...,a_n+b_j\)的\(gcd\). 题解:我们很容易的得出\(gcd\)的一个性质:\(gc ...
- html div内第二行文字显示不下的时候才用省略号代替 css实现
有时候文字太多,但为了美观想要在第二行的时候才显示省略号,而不是第一行超出马上就出现省略号 下面是css代码: overflow:hidden;text-overflow: ellipsis;//显示 ...
- CSS布局之div交叉排布与底部对齐--flex实现
最近在用wordpress写页面时,设计师给出了一种网页排布图样,之前从未遇到过,其在电脑上(分辨率大于768px)的效果图如下: 而在手机(分辨率小于等于768px)上要求这样排列: 我想到了两种方 ...
- 像table一样布局div
原文:http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/ 下面是我翻译的内容,是根据我对文章的理解意译的 ...
- 点击其它地方隐藏div/事件冒泡/sweet-alert阻止冒泡
点击document时把div隐藏,但点击div时阻止点击事件冒泡到document,从而实现“点击文档其它地方隐藏div,点击div本身不隐藏”.js代码如下:$("#div") ...
- CSS技巧!像table一样布局div
摘自:http://www.cnblogs.com/hnyei/archive/2011/09/19/2181442.html 许多网页设计师都喜欢,将两个或者多个容器等高的并排放置,并在里面展示每个 ...
- 2014年---移动端webapp个人年度总结
我今年是由零基础开始入门的,刚好我第一家公司入职后就马上让我接手做ipad版的专题app了.(一入门就是移动端开发,是幸运也是艰辛的开始). 我是自学前端的,当然,对Bootstrap,JQuery ...
- 解决UC浏览器或微信浏览器上flex兼容问题
在UC浏览器上使用display:flex;时会不起作用,要加上兼容性写法,如下 display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ disp ...
- 利用css3实现超出文本指定行数与省略号效果
<style> .text1 {/*单行*/ width:200px; overflow:hidden; text-overflow:ellipsis; -o-text-overflow: ...
随机推荐
- Windows操作系统待整理
12. 2001年10月25日Windows XP发布,Windows XP是基于Windows 2000代码的产品,同时拥有一个新的用户图形界面(叫做月神Luna),它包括了一些细微的修改.集成了防 ...
- SDL文字和图形
SDL本身没有显示文字功能,它需要用扩展库SDL_ttf来显示文字.ttf是True Type Font的缩写,ttf是Windows下的缺省字体,它有美观,放大缩小不变形的优点,因此广泛应用很多场合 ...
- SpringMVC配置拦截器实现登录控制
SpringMVC读取Cookie判断用户是否登录,对每一个action都要进行判断.之前使用jstl标签在页面上判断session如果没有登录就使用如下代码跳转到登录页面. <c:if tes ...
- 使用count结合nvl函数时碰到的问题
count()函数功能:统计表中中某个字段或所有记录个数,字段值为null的不做统计. 手册中解释: COUNT returns the number of rows returned by the ...
- 关于Azure带宽的测试
以前见客户经常会碰到一些客户问我们你们Azure的带宽是多少,每次回答这个问题我们只能含糊地告诉客户一个大概数值,这样就会留给客户一个认为我们很不专业的印象,其实站在客户的角度我们也能理解,连这样的一 ...
- Eclipse 设置SVN忽略文件
1.在 Eclipse 中点击菜单 window --> Preferences --> Team --> Ignored Resources 2.在Eclipse的导航视图中,选中 ...
- css pre标签
浏览器:firfox49.0.2 在使用<pre>标签输出格式化文本的时候,遇到了一个小问题. 要在页面的底部输出两行文本,但是最后一行的文字总是距离屏幕的底部太大.下面图中的样子: 相关 ...
- poj 2503(字符串)
http://poj.org/problem?id=2503 题意:就是翻译,给你一个字典,然后再查找单词,找得到的就输出单词,找不到的输出eh,用Map水题一个,但这个题有点意思的就是输入的问题 # ...
- VS中批注的使用
SAL 是 Microsoft 源代码注释语言. 使用源代码批注,可以使代码背后的意图更加清晰. 这些注释还可以使用自动化的静态分析工具更准确地分析代码,显著减少误判.那么什么是批注,举个简单的例子, ...
- vue-cli构建vue项目
参考资料:Vue2.0 新手完全填坑攻略—从环境搭建到发布 1.Node.js安装 https://nodejs.org/en/download/ 2.安装vue-cli npm install -g ...