2列のテキストレイアウト

このトピックは、「divsとcssを使用してページに2つの列を作成する方法」のトピックに関する基本的な説明ではありません。 私の仕事は、MS Wordが行うように、モノリシックテキストを2列に分割することでした。 このためのcssには標準タグがないため、問題を解決するためにタンバリンと少し踊らなければなりませんでした。

テキストを含む列の幅は、ユーザーによる情報の認識の容易さに大きく影響します。 したがって、ワイドスクリーンモニターの現在の人気を考えると、テキストを列に分割すると、その「読みやすさ」が大幅に向上します。

テキストを列に分割するために、cssと少しのJavaScriptが使用されました。 パーティションアルゴリズム自体は、4つのステップのみで構成されています。

ステップ1

テキスト用のブロックを作成し（この例では「News」と呼ばれます）、テキストが配置されるブロックを2つ配置します。 これまでのところ、すべてのテキストは最初の列にあります。

フランスの Photoshopで申し訳ありませんが、簡単なイラストを作成しました。意味は明確だと思います。

ステップ2

最初のステップでは、テキスト全体を最初の列Col1に入れました。 ここで、javascriptを使用して、すべてのテキストを2番目の列にコピーします（図では、テキストはグラデーションで特別に作成されているため、将来、上部と下部を判別できます）：

ステップ3

すべて同じjavascript'omが、列Col1およびCol2の現在の高さを決定します。 列Col2は負のマージンに設定されます。 マージンは、列の高さのちょうど半分でなければなりません。 したがって、2番目の列を上げて、下半分のみを表示します。

ステップ4

一般的な（黄色の）テキストブロックを、列の高さの半分に等しい高さに設定します。 overflow：hiddenプロパティを使用して残りをトリミングします。





そして結果を見てください 。

結論の代わりに

より難しいタスクは、テキストのちょうど中央に収まる場合、または幅が1列の幅を超える場合に、このテキストに画像またはビデオを挿入することです。 同意します。写真の半分が最初の列の下部にあり、後半が2番目の列の上部にある場合、写真はばかげて見えます。

私はそのようなオプションを実装するタスクに直面していませんでしたが、理論的にはこれは解決されています。 すべての画像にはposition：absolute属性が必要であり、javascriptを使用して列内に、相対位置の画像の下に正確に寸法と座標を持つ空の要素を作成する必要があります（そうでない場合、テキストは画像の下に隠れます）。