使用bootstrap网格系统自适应盒子宽度时保持所有盒子高度一致。
使用了bootstrap网格系统的好处是很容易便实现了响应式布局,盒子可以根据设置的样式,随着屏幕的大小改变而自动改变宽度,但是也存在一个问题,那就是盒子的高度是由盒子的内容决定的,如果盒子里的内容不一样,会导致盒子的高度不一致,这样会使界面不太美观,并且可能会影响后面的盒子。可能的界面如下:

然而,我想要的是一排盒子的高度一致,如果把盒子高度固定住,比如:height:500px;会导致屏幕大小变化时,盒子高度没有随着宽的改变而改变,所以我找到了另一个方法:
把盒子的高度设为0,利用padding撑起高度:
height: 0;
padding:0 0 200% 0;
如上所示,如果把下padding设为200%,那么无论宽度如何变化,宽和高的比都是1:2,这样你就可以随自己需要设置宽和高的比例了,是不是觉得很方便呢。效果图如下:

终于得到我想要的结果了。
使用bootstrap网格系统自适应盒子宽度时保持所有盒子高度一致。的更多相关文章
- CSS侧边栏宽度不动(更改页面宽度时),内容区宽度自适应
一个页面,左栏是内容栏content,右栏是侧边栏sidebar.如何使侧边栏宽度不动(更改页面宽度时),内容区宽度自适应呢?为了保证内容区宽度自适应,先不设定其宽度,使其填充整个DIV区域,设定足够 ...
- Css中实现一个盒子固定宽度,另一个盒子宽度自适应的方法
Css中实现一个盒子固定宽度,另一个盒子宽度自适应的方法 网上方法很多,个人认为以下两种思想是最为常用的. 一种是让第一个盒子脱离文档流,第二个盒子离左边有一定距离. 第二种方法是使用flex布局,不 ...
- bootstrap的自适应 和细节点
bootstrap的自适应尽量少用绝对宽度px来定义大小,这会导致缩小屏幕宽度时相冲突,多使用百分比来改变位置.. 遇到不能用margin和padding来改变位置时,首先应该想到绝对定位和相对定位( ...
- 详解Bootstrap网格系统
bootstrap框架中的网格系统就是将容器平分成12份,在使用的时候可以根据实际情况重新编译LESS/SASS源码来修改12这个数值.bootstrap框架的网格系统工作原理: 1.数据行(.row ...
- bootstrap学习笔记--bootstrap网格系统
移动设备优先 移动设备优先是 Bootstrap 3 的最显著的变化. 在之前的 Bootstrap 版本中(直到 2.x),您需要手动引用另一个 CSS,才能让整个项目友好的支持移动设备. 现在不一 ...
- Bootstrap 网格系统(Grid System)的工作原理 - 媒体查询
媒体查询 媒体查询是非常别致的"有条件的 CSS 规则".它只适用于一些基于某些规定条件的 CSS.如果满足那些条件,则应用相应的样式. Bootstrap 中的媒体查询允许您基于 ...
- 自适应图片宽度的jQuery焦点幻灯轮播代码
自适应图片宽度的jQuery焦点幻灯轮播代码 注意要1.7.2版本的jq才支持点击后显示点击的图片,不然就是一直顺序播放 演示 XML/HTML Code <div id="sli ...
- easyui panel自适应浏览器宽度
一.目标效果: 当浏览器窗口大小改变时.panel宽度始终为浏览器宽度的50%,panel高度则根据其中内容的多少而变化,横向竖向滚动条皆不出现.且不需要重新刷新浏览器或者其他js代码 兼容:chro ...
- css 图片内容在不同分辨率下居中显示(演示的图片宽度是1920px,当图片宽度大于显示屏的宽度时)
1.img 图片内容在不同分辨率下居中显示(如果隐藏多余,在img外面套一个div 设定overflow: hidden.div的大小就是img显示区域的大小) <!DOCTYPE html& ...
随机推荐
- PAT-1099(Build A Binary Search Tree)
题目见这里 分析:分四步进行 1)根据给定的结点情况建二叉树 2)对输入的键值排序(asending) 3)对二叉树中序遍历,同时对应赋key值 4)层次遍历(队列应用) 题目并不困难,但是我误入了 ...
- 恐怖的ifdown eth0;0
下午闲的蛋疼,随手给测试机配了个浮动地址eth0:0. ping了下OK,内网访问没问题. 准备收手的时候,瞄了一眼ifcfg-eth0:0的配置,发现广播地址BROADCAST写成了BOADCAST ...
- npm的理解
一 概念方面 npm的全称是node package manger ,是一个nodejs包管理工具,已经成为非官方的发布node模块包的标准.有了npm可以很快速的找到特定服务器要使用的包,进行下载, ...
- Luogu 1111 修复公路(最小生成树)
Luogu 1111 修复公路(最小生成树) Description A地区在地震过后,连接所有村庄的公路都造成了损坏而无法通车.政府派人修复这些公路. 给出A地区的村庄数N,和公路数M,公路是双向的 ...
- python基础(5):数字和字符串类型
今天总结一下数据类型中的数字和字符串型. 预习: 小练习 一.数字(int,float) 在python3中数字类型只有整形,浮点型,复数.而复数在平时的编程中几乎用不到所以我们只要掌握整形和浮点型即 ...
- 字典的定义和操作 (Python)
字典是由key and value 构成,无序结构(不想列表那样有固体位置): note:key 是唯一的,没有重复: 字典可以多级嵌套: 定义: dict1 = { # 由等式构成 dict = { ...
- ServerSocket与Socket类
ServerSocket与Socket类 TCP套接字协议: TCP最主要的特征就是能够建立长时间的连接,而且能够保证数据安全的送达,但是速度比较慢.使用TCP进行连接的时候会有三次握手,之后才建立起 ...
- Vue.js之深入浅出
介绍引言 Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上 ...
- (转)log4j(七)——log4j.xml简单配置样例说明
背景:在公司中警察需要做技术支持,查看日志,而查看日志首先要自己清楚日志是如何生成的,所以有必要知道日志的前世今生! 转载出处:http://www.cnblogs.com/godtrue/p/644 ...
- jquery 禁止herf跳转,并执行相应的js代码
<a class="oh_btn bg_3" href="javascript:void(0);" onclick="myfun(this)&q ...