带有图像的两列文本块答案

【问题标题】：Two columns text block with an image带有图像的两列文本块
【发布时间】：2012-04-10 02:15:07
【问题描述】：

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

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

P.S.：真的有可能吗？

【问题讨论】：

您可以在两个 html 块之间拆分文本，还是需要它成为一个大段落？
你有没有尝试过？我假设您正在尝试使用 CSS 列？
@Joel 很遗憾我无法拆分它...
就像报纸！很难设计。（不可能）
@rgthree，我什至不知道该怎么做，因为我无法理解宽度不同的两列，而正确的图像让我更糟。

标签： javascript html css web markup

【解决方案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

【讨论】：