1

我已经定义了一个具有列宽的网格以适合我想要的内容。

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

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

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

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

亲切的问候，尼尔

4

2 回答 2

0

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

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

想法是您使用元素的 padding-bottom 设置宽度/高度比。

于 2013-02-25T11:15:06.763 回答
0

感谢您的回答@OpherV，但@rctneil 甚至没有提到JS。他（和我一样）正在寻找 Sass/Susy 解决方案。

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

于 2014-09-25T17:12:42.363 回答