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

Question

我定义了一个网格，其列宽适合我想要的内容。

比如说，我然后希望使用网格放置一个元素，因此我让它跨越 9 列中的 3 列，宽度约为 33.3%

然后我希望该元素的高度与其宽度相同。

这是我经常卡住的地方。如果我使用 Compass Susy 的 columns() 函数，它将高度设置为 33.3%，这正是它的目的，但显然这不是我想要的。

人们如何解决这个问题以获得预期的结果？

亲切的问候，尼尔

Answer 1

不需要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/

尝试根据浏览器调整大小并查看它的行为。

想法是使用元素的填充底部设置宽度/高度比。