В ASP.NET, как бы я разделить экран на четыре равных прямоугольника? - PullRequest
Новая
       4

В ASP.NET, как бы я разделить экран на четыре равных прямоугольника?

2 голосов
/ 03 марта 2010

Мне нужно разделить экран на четыре равных раздела и отобразить содержимое в каждом разделе. Будут ли таблицы стилей или таблицы лучше? Используемые браузеры будут IE 6.0 или IE 7.0. Мне нужно решение, которое будет работать в обоих браузерах.

Ответы [ 3 ]

1 голос
/ 03 марта 2010

Таблицы должны использоваться для табличных данных, а не для макета. Я бы сделал с плавающими 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;" />
0 голосов
/ 03 марта 2010

Просто взбил это вместе, я никогда не использовал его в производстве. Но я протестировал его, и он работает в 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>

Единственное, что нужно иметь в виду, это то, что не следует помещать отступ в эти основные структурные элементы. Положите отступы / поля на их содержимое. Объявление высоты и ширины в теле поможет IE6.

0 голосов
/ 03 марта 2010

Спорное решение, но легко исправить это 2х2 табл. В противном случае я бы порекомендовал использовать CSS Framework, такой как http://www.blueprintcss.org/

Это облегчает создание CSS, потому что это похоже на работу в сетке и совместимо с IE6 и 7.

Кроме этого, просто создайте две строки из двух div в CSS и добавьте соответствующие исправления IE по мере необходимости.

См. http://www.w3schools.com/css/ для справки CSS.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...