Question

我需要将屏幕划分为四个相等的部分，并在每个部分中显示内容。样式表或表格会更好使用的浏览器是IE 6.0或IE 7.0。我需要一个适用于两种浏览器的解决方案。

Answer 1

表格应该用于表格数据，而不是布局。我会做浮动的div，并允许增长而不是固定的高度。

<div style="float: left; width: 50%;">1</div>
<div style="float: right; width: 50%;">2</div>
<br style="clear: both;" />
<div style="float: left; width: 50%;">3</div>
<div style="float: right; width: 50%;">4</div>
<br style="clear: both;" />

Answer 2

有争议的决定，但容易修复是2x2表。否则，我建议使用CSS框架，例如http://www.blueprintcss.org/

这样可以更容易地创建CSS，因为它让人感觉像在网格中工作并且兼容IE6和7。

除此之外，只需在CSS中创建两行两个div，并根据需要添加适当的IE修复程序。

有关CSS帮助，请参阅http://www.w3schools.com/css/。

Answer 3

刚刚将它们鞭打在一起，我从未在生产中使用它。但我测试了它，它适用于IE6和IE7，以及IE8和Firefox等现代浏览器。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">

    body { padding: 0 0 0; margin: 0 0 0;height:100%;width:100%; }
    .square { position:absolute; border:1px solid #000000;width:49.75%;height:49.5%;_height:49.5%; overflow:auto; }
    #top-left { top:0;left:0; }
    #top-right { top:0; right:0; }
    #bottom-left { bottom:0; left:0; }
    #bottom-right { bottom:0; right:0; }

</style>
</head>
<body>

    <div class="square" id="top-left"> ... </div>
    <div class="square" id="top-right"> ... </div>
    <div class="square" id="bottom-left"> ... </div>
    <div class="square" id="bottom-right"> ... </div>

</body>
</html>

唯一要记住的是不应该在这些主结构div上添加填充。在其内容上放置填充/边距。身体的高度和宽度声明可以帮助IE6。

在ASP.NET中，我如何将屏幕划分为四个EQUAL矩形？

3 个答案: