/ /列を常に同じ高さにしますか? (ファウンデーション5) - zurb-foundation

列を常に高さにしますか? (ファウンデーション5) - zurb-foundation

画像のようにレイアウトを作成するには?最初の列の左と2番目の列の右は常に同じ高さでなければならず、 最初の列の高さに応じて、Foundation 5を使用します。

ここに画像の説明を入力

回答:

回答№1は0

財団のイコライザーは、それらを均等にしますが、より長いものに基づいています。 http://foundation.zurb.com/docs/components/equalizer.html

あなたはjQueryを使って自分でこれを行うことができます(これは多くのカラムと、サイズを決めるカラムとして動作します:

$(document).ready(function() {
sizeRow();

function sizeRow() {
var $col = $(".sizeRow .size-by-me");
var height = $col.height();
$col.siblings(".size-me").height(height);
}
});
.small-6 {
float: left;
width: 50%;
}
.col1 {
height: 400px;
background-color: #F00;
}
.col2 {
height: 200px;
background-color: #FF0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="row sizeRow">
<div class="small-6 columns size-by-me col1">Column 1</div>
<div class="small-6 columns col2 size-me">Column 2</div>
</div>


関連する質問


コメント(0)

コメントを追加