Mik*_*ike 8 css layout internet-explorer
我正在尝试使用两个50%列宽的此布局.但似乎当右列达到其"最小宽度"时,它会进入左列.有没有办法使用'shim'技术为包装器设置最小宽度,以便两列都停止调整大小.因此,消除了在左列下发现右列的问题.
我的页面如下.
<style type="text/css">
#left {
float: left;
width: 50%;
}
.minwidth {
width: 500px;
height: 0;
line-height: 0;
}
</style>
<div id="wrapper">
<div id="left">
left
</div>
<div id="right">
right
</div>
<div class="minwidth"> </div>
</div>
问题是左列将停止调整大小,但右列将位于左列下方并继续调整大小.基本上,我想要的效果是一旦包装器宽度低于左下,左侧和右侧列也停止调整大小.将垫片放在左右两列都不起作用.
是否有另一种方法可以获得两个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创建许多不错的布局.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
/* For browsers that understand min-width */
.width {
width: 100%;
min-width: 500px;
}
/* IE6 Only */
* html .minwidth {
border-left: 500px solid white;
position: relative;
float: left;
}
/* IE6 Only */
* html .wrapper {
margin-left: -500px;
position: relative;
float: left;
}
.left {
float: left;
width: 50%;
}
.right {
float: left;
}
</style>
</head>
<body>
<div class="width">
<div class="minwidth">
<div class="wrapper">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
</div>
</div>
</div>
</body>
</html>
现在,我设置Stack Overflow帐户的动机是能够回应下面的建议:"如果你想要两列,请使用表格,而不是试图强迫Div表现得像一张桌子".由于我太新,无论是评论还是投票,我都在进行讨论.
真？
有人问一个关于基于CSS的布局的问题,你通过告诉他们使用HTML表来回应？
首先让我说我不相信HTML表是完全没必要的.事实上,每当我需要显示表格数据,即关系数据时,我都会使用HTML表格.CSS表格显示属性尚未完全支持(即将推出IE8!),使用单层 HTML表格是一种有效的解决方案.查看任何Google网页的标记,您会看到他们会同意.
作为一个花费大量时间编写基于CSS的布局的人,他们可以在10分钟内使用表格完成跨浏览器兼容,我同意这个问题有一个更简单的解决方案.然而,仅仅因为你可以使用炸药来翻新你的厨房,并不意味着你应该.以下文章提供了为什么更理想的基于CSS的布局的详细说明.