两列文本块与图像

时间:2012-04-09 17:17:23

标签: javascript html css web markup

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

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

P.S。:实际上可能吗?

1 个答案:

答案 0 :(得分:0)

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