在 ASP.NET 中，我将如何将屏幕分成四个 EQUAL 矩形？答案

【问题标题】：In ASP.NET, how would I go about in dividing the screen into four EQUAL rectangles?在 ASP.NET 中，我将如何将屏幕分成四个 EQUAL 矩形？
【发布时间】：2023-03-30 00:00:01
【问题描述】：

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

【问题讨论】：

为什么不使用适用于所有浏览器的解决方案？

标签： asp.net css

【解决方案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;" />

【讨论】：

这不会将屏幕在高度上分成四个相等的部分，我认为这是要求的。如果高度无关紧要，浮动就可以了。
该解决方案应该可以跨浏览器工作。我看不出用一个表来定义这种布局有什么问题。

【解决方案2】：

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

这使得创建 CSS 变得更容易，因为它让人感觉像是在网格中工作，并且兼容 IE6 和 7。

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

请参阅http://www.w3schools.com/css/ 获取 CSS 帮助。

【讨论】：

【解决方案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 上放置填充。在其内容上放置填充/边距。 body 上的 height 和 width 声明是为了帮助 IE6。

【讨论】：