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 に答える