javascript - 画像付きの 2 列のテキスト ブロック

Question

助けが必要です... 2 つの画像と、幅の異なる 2 列に分割されたテキスト ブロックを含むレイアウトのマークアップを行うにはどうすればよいですか。ここに私のレイアウトのスケッチがあります：

私の問題を十分に明確に説明したことを願っています。

PS：実際に可能ですか？

Answer 1

CSS3には解決策がありますが、まだ標準ではなく、古いブラウザでは機能しません。ここにリンクhttp://www.css3.info/preview/multi-column-layout/があります。

おそらく最良のアイデアは、なんとかしてjavascriptを使用することです。すべてのテキストを最初の列に配置し、高さをテストしてから、同じ列になるまで、または最初の列が目的の高さになるまで、テキストの一部を次の列に移動します。

別の方法は、事前定義された比率を設定することです。たとえば、最初の列に2/3、2番目の列に1/3）。次に、文字数を使用して比率に基づいてテキストを分割します。これは正確ではなく、上記の方法と同様の方法を使用して、オーバーフロープロパティに基づいて正確な幅を見つけることができますが、文字は平均して正しい長さになります。

この方法は非常に単純で、次のようになります。

var txt='Column text...';
var len=txt.length;
var chars=Math.floor(len*.67);
//Assuming you want 2/3 of the text in the first column
document.getElementById('col1').innerHTML=txt.substring(0,chars);
document.getElementById('col2').innerHTML=txt.substring(chars);
//Notice that this could split in the middle of a word so you would need to do
//some checking for the nearest space and the change the break to there.
//Also you could then use the previous method to adjust it if you want something really accurate