In ASP.NET, how would I go about in dividing the screen into four EQUAL rectangles?_问答_开发者

In ASP.NET, how would I go about in dividing the screen into four EQUAL rectangles?

开发者 https://www.devze.com 2022-12-21 15:09 出处：网络

I need to divide the screen into four equal sections and display content in ea开发者_运维技巧ch section.Would style sheets or tables be a better The browsers used would be IE 6.0 or IE 7.0.I need a so

相关专题：asp.net css

I need to divide the screen into four equal sections and display content in ea开发者_运维技巧ch section. Would style sheets or tables be a better The browsers used would be IE 6.0 or IE 7.0. I need a solution that would work on both browsers.

Tables should be used for tabular data, not layout. I would do with floated div's and allow for growth rather than fixed height.

<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;" />

The controversial decision but easy fix is a 2x2 Table. Otherwise I would recommend using a CSS Framework such as http://www.blueprintcss.org/

This makes it easier to create CSS because it makes it feel like working in a grid and is IE6 and 7 compatible.

Other than that just create two rows of two divs in CSS and add appropriate IE fixes as needed.

See http://www.w3schools.com/css/ for CSS help.

Just whipped this together, I've never used it in production. But I tested it and it works in IE6 and IE7, as well as modern browsers like IE8 and 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>

The only thing to keep in mind is that you should not put padding on those main structural divs. Put padding/margins on their contents. The height and width declaration on the body are there to help IE6.