两列文本块与图像

Question

我需要一些帮助...... 我应该如何对两个图像和一个文本块进行布局标记，这两个图像分为两列宽度不同的第二列，因为其中一个图像，第二列开始低于第一列？这是我的布局草图：

我希望我能够明确地描述我的问题。

P.S。：实际上可能吗？

Answer 1

CSS3有一个解决方案，但它不是标准的，在旧版浏览器中不起作用，这里是一个链接http://www.css3.info/preview/multi-column-layout/。

可能最好的想法是以某种方式使用javascript。将所有文本放在第一列并测试高度，然后将文本的一部分移到下一列，直到您有相等的列或直到第一列处于所需的高度。

另一种方法是具有预定义的比例，例如（第一列中为2/3，第二列中为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