跨浏览器三列布局

时间:2009-06-25 03:55:47

标签: css layout

假设我有一排有三列 - 左侧和右侧有一些按钮,中间宽度为流体。

如果中间列的内容到达中间列的区域,则应该隐藏溢出。

此解决方案在Firefox上运行良好,但Opera和IE6的输出差异很大。

<div style="width:/fluid/">
   <input type="image" src="img1.png" style="margin: 4px 0 0 5px; float: left;"/>
   <input type="image" src="img2.png" style="margin: 4px 5px 0 0; float: right;"/>
   <input type="image" src="img3.png" style="margin: 4px 5px 0 0; float: right;"/>
   <input type="image" src="img4.png" style="margin: 4px 5px 0 0; float: right;"/>
   <div style="margin: 0pt 68px 0pt 26px;">
      <p style="margin: 0; cursor: pointer; overflow: hidden;">abcdefghijklmnopqrstuvxy</p>
   </div>
</div>

在Firefox上,所有这些按预期显示在一行上 - 左边一个按钮,右边三个按钮,内容的可见部分取决于div容器的宽度。

在Opera上 - 下一行继续部分不适合一行的内容。

在IE6上 - 按钮位于第一行,内容显示在下一行全长。

1 个答案:

答案 0 :(得分:5)