In ASP.NET, how would I go about in dividing the screen into four EQUAL rectangles?
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.
加载中,请稍侯......
精彩评论