嵌入式内联块在Opera和Chrome中出现故障

Question

我正在尝试创建三个列布局，它应该如下所示：

|sidebar| |column1| |column2| |column3| |sidebar2|

我的布局适用于：IE，Firefox和Safari ......

但它在Opera和Chrome中打破了。

在这些浏览器中看起来像这样：

|sidebar| |column1|    |column2|     |sidebar2| 
                           |column3|  

我认为问题出在中间列（我将“display：inline-block”和“text-align：center”赋予正文以使其居中，但由于某种原因，右列被推倒了）

我知道我问了很多但是请你检查我的Page以查看这些浏览器中的问题。

如果有人知道解决方案，那就太好了。谢谢！！

Answer 1

您需要将中间列的CSS更改为向左浮动。

#blogs_three_cols .middle_column {float:left;}

如果您希望列彼此相邻浮动，则需要实际浮动它们:)您已设置none。这样做使得正确的专栏变得混乱。

Answer 2

这样做......

#blogs_three_cols > div {
 float:none !important;
 display:inline-block !important;
 vertical-align:top;
}

除非您可以更改当前的css，否则您需要使用！important;

覆盖样式

在上面更新。