在ASP.NET中，我將如何將屏幕劃分爲四個EQUAL矩形？

我需要將屏幕分成四個相等的部分，並在每個部分顯示內容。樣式表或表格會更好瀏覽器使用IE 6.0或IE 7.0。我需要一個適用於這兩種瀏覽器的解決方案。在ASP.NET中，我將如何將屏幕劃分爲四個EQUAL矩形？

來源

2010-03-03 Duke

A 2 X 2表？ – 2010-03-03 04:50:51

爲什麼不使用適用於所有瀏覽器的解決方案？ – 2010-03-03 05:01:29

有爭議的決定，但容易修復是一個2x2表。否則，我會推薦使用CSS框架，如http://www.blueprintcss.org/

這使得它更容易創建CSS，因爲它使它感覺像在網格中工作，並且與IE6和7兼容。

除此之外，只需在CSS中創建兩行兩個div，並根據需要添加適當的IE修補程序。

請參閱http://www.w3schools.com/css/獲取CSS幫助。

來源

2010-03-03 04:58:11

表格應該用於表格數據，而不是佈局。我會用浮動的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;" />

來源

2010-03-03 05:00:07

這不會將屏幕分割爲四個相等的高度方向，我認爲這是要求的。如果身高無所謂，漂浮很好。 – 2010-03-03 05:44:37

該解決方案應該可以跨瀏覽器使用。我沒有看到用單個表來定義這種類型的佈局有什麼問題。 – Khanzor 2010-03-03 05:52:02

他的確可以跨瀏覽器工作。（我自己也是。） – 2010-03-03 06:12:36

只是把它們混在一起，我從未在生產中使用它。但我測試過它，它可以在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。

來源

2010-03-03 05:38:19

在ASP.NET中，我將如何將屏幕劃分爲四個EQUAL矩形？

回答

相關問題