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/

尝试调整浏览器大小并查看其行为方式。

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

Answer 2

Thnanks为你的答案@OpherV但@rctneil甚至没有提到JS。他（像我一样）正在寻找Sass / Susy解决方案。

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

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

2 个答案: