我用的是“容器流体”,对于使用“span2”等的列的水平宽度设置效果很好。
我有一个独特的要求,我代表的东西,我想显示“正方形”,同时仍然享受的好处,引导的响应宽度设置。有没有一个好的方法来确保我的元素有相同的高度和宽度?
最佳答案
您可以使用下面的填充技巧(请参见jsfiddle)使元素具有所需的任何纵横比(高度根据宽度调整):
外部div使垂直填充值为宽度百分比的正方形空间。
内部div使用外部div全尺寸(填充空间通常在外部不可用)。
HTML:
<div class="out">
<div class="in">
</div>
</div>
CSS:
.out {
position: relative;
height: 0;
padding-bottom: 100%;
}
.in {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
background-color: red;
}