おそらく、彼の人生で少なくとも一度はすべてのタイプセッターが、2列または3列のレイアウトのレイアウトに遭遇しました。 ただし、たとえばハブのように、列の背景色が変わらない限り、レイアウト自体は簡単に構成できますが、 しかし、マルチカラーでは、コンテンツに沿って伸びる傾向があり、隣接する列のコンテンツの高さは通常異なるため、苦労する必要があります。
この問題を解決する2つの方法を知っています。
-両方の列をコンテナで囲み、背景に2色の画像を配置します。
-列を同時に負のマージンと正のパディングに設定します。
どちらの方法にも長所と短所がありますが、今日はjQueryプラグイン-Flexifyを使用した列の配置について説明します。
Flexifyを使用すると、Webアプリケーションでフルページの移動レイヤーを作成できます。つまり、ページ上で必要な要素の高さと幅を調整し、ブロックの子の垂直または水平レイアウトを割り当て、要素から行と列を作成できます。
Flexifyは
flow（）および
flex（）関数をJqueryに追加します。必要な値を設定した後、関数$（document）.flexify（）を呼び出す必要があります。
フロー関数は、値を唯一の引数として取ります：「垂直」または「水平」。これらの値は、子がどのように引き伸ばされるかを決定します。 たとえば、次のコードは、htmlおよびbodyに含まれるすべての要素を強制的に水平にレイアウトします。
$(function () {
$('html, body').flow('horizontal');
$(document).flexify();
});flex関数は、ストレッチ値と係数の2つの引数を取ります。 ストレッチ値は、たとえば、配置された要素（上、右、下、および左）に対して、margin- *、padding- *、border- *、width、heightのようにプルします。 ストレッチ率-0より大きい任意の整数。通常は1。
3列の高さを揃えるには、次のように記述します。
$(function () {
$('#content, #sidebar, #sidebar2').flex('height', 1);
$(document).flexify();
});ご覧のとおり、これを使用するのは非常に簡単で便利です。 プラグインは
ここからダウンロードできます。以下はその使用例です。
高さを揃えた3列末尾のフィールドとフレームを持つ中央ブロック絶対配置ブロック