Sass/CSS网格和相同的高度/宽度

我已经定义了一个具有列宽度的网格以适合我所需的内容。Sass/CSS网格和相同的高度/宽度

说，我然后希望使用网格所以我有它跨越9列的3的33.3％的一个大约宽度将一个元件

我然后希望该元素是相同的高度，它的宽度。

这是我总是被卡住的一点。如果我使用Compass Susy的columns（）函数，它将高度设置为33.3％，这正是它的意图，但显然这不是我想要的。

人们如何解决这个问题才能获得理想的结果？

亲切的问候，尼尔

来源

2013-02-04 rctneil

无需JS。它能够通过简单的HTML和CSS绝招：

HTML

<div class="container"> 
<div class="item"><div class="content"></div></div> 
<div class="item"><div class="content"></div></div> 
<div class="item"><div class="content"></div></div>  
</div>

相关CSS

.container{ 
    position: absolute; 
} 

.item{ 
    height: 0; 
    position: relative; 
    padding-bottom: 33%; 
} 

.item .content{ 
    height: 100%; 
    width: 100%; 
}

的jsfiddle例如：http://jsfiddle.net/opherv/hjVSM/

尝试调整到浏览器，看看它的行为如何。

想法是，您可以使用元素的填充底部来设置宽高比。

来源

2013-02-25 11:15:06 OpherV

Thyanks为您的答案@OpherV但@rctneil甚至没有提到JS。他（如我）正在寻找Sass/Susy解决方案。

是否有任何Sass mixin设置动态宽度等于宽度的元素的高度？

来源

2014-09-25 17:12:42 HomTom

Sass/CSS网格和相同的高度/宽度

回答

相关问题