跨浏览器三列布局 [英] Cross-browser three column layout

问题描述

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

Lets say I have one row with three columns - some buttons on left and right side and fluid middle width.

如果中间列的内容覆盖到中间列的区域，则应隐藏溢出。

If the contents of the middle column reaches over into the area of the middle column, the overflow should be hidden.

此解决方案在Firefox上运行正常，但Opera和IE6的输出有很大的不同。

This solution works well on Firefox but the output of Opera and IE6 is much different.

<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容器的宽度。

On Firefox all this is shown on one row as expected - one button on the left, three buttons on the right, and the visible part of the content depends on the width of the div container.

在Opera上 - 不适合一行的内容的一部分是

On Opera - part of the content that doesn't fit into one row is continued on the next row.

在IE6上，按钮位于第一行，内容将以完整长度显示在下一行。

On IE6 - the buttons are on the first row, and content is shown on next row with full length.

推荐答案

http://www.alistapart.com/articles/holygrail

这篇关于跨浏览器三列布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！