найти div по координатам - PullRequest
0 голосов
/ 16 марта 2012

Мне нужно нарисовать план зала на сайте. Зал оформлен в сторонней программе. Программа дает мне план зала в виде координат каждого места:

Row Place  X    Y    Widht    Height
1    1     10   10    35       35

План в редакторе выглядит так:
enter image description here

У меня есть следующий код для рисования в представлении:

 @foreach (var plan in Model.HallPlans)
{
 <div class="place" style="left:@(plan.X)px; top:@(plan.Y)px; height: @(plan.Height)px; width:@(plan.Width)px">@plan.Seat</div>
}

Этот код генерирует следующее:
enter image description here

Я хочу уменьшить размер блока div, например, в два раза. Если я разделю Height и Width на 2, то это будет выглядеть так: enter image description here

Размер первых трех строк такой, как я хотел, но широкое место в четырех рядах выглядит не правильно (не до конца ряда.) Как исправить? И как я могу уменьшить пространство между div?

PS. немного CSS:

div.place {
    display: block;   
    text-indent: -9999px;
    margin: 0 0 1px 1px;    
   position:absolute;
    float: left;
    border-radius: 2px 2px 2px 2px;
    -moz-border-radius: 2px 2px 2px 2px;     
}

Спасибо и извините за мой английский.

Ответы [ 2 ]

1 голос
/ 16 марта 2012

это очень просто, четвертая строка равна половине желаемой ширины, потому что вы поделили Width на 2. Только для четвертой строки не делайте , не делите Width на 2, но только Height, и он будет заполнять до конца строки.

В качестве альтернативы взгляните на этот подход, я просто понял, что это может быть тем, что вы хотите: где вы решите разделить Width и Height на 2, также разделите Xи Y на 2, затем выводится как обычный.У вас будет конечный результат, похожий на исходное изображение, но в два раза меньше.

0 голосов
/ 16 марта 2012

Ну, вы можете попробовать добавить следующее в вашу таблицу стилей:

 div.place:last-child {
        width: 100%
    }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...