CSS:两个不符合最小宽度的50%流体柱

我正在尝试使用两个50%列宽的此布局.但似乎当右列达到其"最小宽度"时,它会进入左列.有没有办法使用'shim'技术为包装器设置最小宽度,以便两列都停止调整大小.因此,消除了在左列下发现右列的问题.

我的页面如下.

    

        left
    
    

        right
    
    
 

问题是左列将停止调整大小,但右列将位于左列下方并继续调整大小.基本上,我想要的效果是一旦包装器宽度低于左下,左侧和右侧列也停止调整大小.将垫片放在左右两列都不起作用.

是否有另一种方法可以获得两个50%宽的色谱柱并使用垫片来正确设置最小宽度？

谢谢.

编辑:minwidth类中的空格实际上是转换后的空格.;)

我能够根据Stu Nicholls在CSS Play中使用的技术提出"不需要HTML表"的解决方案,我个人喜欢它,因为它不仅适用于IE6 +和FF2 +,它也是有效的CSS而不是需要任何黑客攻击.关于为什么基于CSS的布局比HTML表更可取的论点,请参见下文.

首先,我建议在使用CSS设计新页面时,使用符合标准的浏览器模式.对于怪异模式和标准兼容模式的说明,请查看这篇文章从我最喜欢的CSS资源网站之一.您所要做的就是在页面顶部添加特定的DOCTYPE元素.然后,CSS将被强制以符合标准的模式呈现,从而减少错误和浏览器特性.在无法切换到标准兼容模式的情况下,quirksmode中的浏览器有一个最小宽度解决方案,也可以在CSS Play中使用.

其次,您必须在现有标记周围添加其他包装器.此包装器用于设置理解最小宽度(不是IE)的浏览器的最小宽度.然后,您可以使用*html技巧专门针对IE 6,并将Stu Nicholl的技术应用于内部包装器.此处详细介绍了该技术,使用的具体示例为"#2符合标准的IE模式":

http://www.cssplay.co.uk/boxes/minwidth.html

最终结果相当简单.它使用原始问题中提到的2列ALA样式技术创建2个50%列,其具有总体最小宽度(在此示例中为500px),其中列停止调整大小并且右列不落在左列下方.我希望这有帮助!

编辑:可以使用相同的技术将跨浏览器兼容的最小宽度应用于任何内容.例如,列不需要各自为50%,并且可以使用任意数量的列.http://www.glish.com/css/是基于CSS的页面布局的一个很好的资源,当与这种最小宽度技术结合使用时,可以使用最小的有效CSS创建许多不错的布局.

    




    

        

            

                Left
            
            

                Right
            
        
    

现在,我设置Stack Overflow帐户的动机是能够回应下面的建议:"如果你想要两列,请使用表格,而不是试图强迫Div表现得像一张桌子".由于我太新,无论是评论还是投票,我都在进行讨论.

真？

有人问一个关于基于CSS的布局的问题,你通过告诉他们使用HTML表来回应？

首先让我说我不相信HTML表是完全没必要的.事实上,每当我需要显示表格数据,即关系数据时,我都会使用HTML表格.CSS表格显示属性尚未完全支持(即将推出IE8!),使用单层 HTML表格是一种有效的解决方案.查看任何Google网页的标记,您会看到他们会同意.

作为一个花费大量时间编写基于CSS的布局的人,他们可以在10分钟内使用表格完成跨浏览器兼容,我同意这个问题有一个更简单的解决方案.然而,仅仅因为你可以使用炸药来翻新你的厨房,并不意味着你应该.以下文章提供了为什么更理想的基于CSS的布局的详细说明.

http://www.chromaticsites.com/web-design-blog/2008-04-03/13-reasons-why-css-is-superior-to-tables-in-website-design/