跨瀏覽器三列布局

Question

可以說我有一列三列 - 左側和右側的一些按鈕和流體中間寬度。

如果中間列的內容超出中間列的區域，則應該隱藏溢出。

該解決方案在Firefox上運行良好，但Opera和IE6的輸出大不相同。在Firefox這一切都是在一排顯示爲預期

<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> 

- 左邊一個按鈕，右側的三個按鈕，並對其內容的可見部分依賴於容器的div的寬度。

On Opera - 不適合一行的內容的一部分在下一行繼續。

在IE6上 - 按鈕位於第一行，內容顯示在下一行，全長。

Answer 1

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