按坐标定位div

时间:2012-03-16 08:36:05

标签: html css asp.net-mvc

我需要在网站上绘制一个大厅的计划。大厅采用第三方计划。该计划以每个地方坐标的形式给我一个大厅的计划:

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块的大小,例如两次。如果我将HeightWidth除以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 个答案:

答案 0 :(得分:1)

<击> 这很简单,第四行是你想要的宽度的一半,因为你将Width除以2.仅为第四行Width除以2,但只有Height,它将填充直到行的结尾。

或者看看这种方法,我才意识到这可能是你想要的: 如果您决定将WidthHeight除以2,又将XY除以2,然后按常规输出。您将得到与原始图像类似的最终结果,但大小只有一半。

答案 1 :(得分:0)

您可以尝试在样式表中添加以下内容:

 div.place:last-child {
        width: 100%
    }