跨浏览器的三个栏布局(Cross-browser three column layout)

2019-09-29 05:01发布

可以说我有一个排,三列 - 在左边和右边和中间流体宽一些按钮。

如果中间列的内容达到了进入中柱的区域,溢出应该被隐藏。

此解决方案以及在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的宽度。

在歌剧 - 那不适合一行内容的一部分,继续下一行。

上IE6 - 按钮是在第一行上,并且内容显示在下一行用全长。

Answer 1:

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



文章来源: Cross-browser three column layout
标签: css layout