列div布局不适用于所有浏览器

Question

我正在尝试创建一个简单的列布局，其中mainContent和rightContent在同一个＆＃34; row＆＃34;中。我没有使用CSS，而是想在JavaScript中设置样式。

这就是我http://jsfiddle.net/tKt5J/2/。

var mainContent = document.getElementById('mainContent');
var rightContent = document.getElementById('rightContent');
mainContent.style.width = "70%";
mainContent.style.styleFloat = "left";
rightContent.style.width = "20%";
rightContent.style.styleFloat = "left";

出于某种原因，这适用于IE 11，但不适用于其他浏览器（例如Chrome 33）。如何让它跨浏览器工作？

Answer 1

Demo

使用cssFloat代替styleFloat：

mainContent.style.cssFloat = "left";
rightContent.style.cssFloat = "left";

根据MDN float article中的说明，

  

如果您从JavaScript中引用此属性作为其成员   element.style对象，您必须将其拼写为cssFloat。另请注意   Internet Explorer 8及更早版本拼写为styleFloat。   这是DOM成员名称规则的例外   以破折号分隔的CSS名称的驼峰式名称（并且由于   事实上，“float”是JavaScript中的保留字，与需要一样   将“class”作为“className”进行转义并将“for”转换为“for”   “htmlFor”）。

Answer 2

我认为你想要float和styleFloat：

mainContent.style.float = "left";
rightContent.style.float = "left";