html - 通过坐标定位div

Question

我需要在 field 上绘制大厅平面图。大厅是用第三方程序绘制的。该程序以每个地方的坐标形式为我提供了大厅的平面图:

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

编辑器中的计划如下所示:

我有以下代码可以在 View 中绘制:

 @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>
}

此代码生成以下内容:

我想缩小 div block 的大小，例如缩小两次。如果我将 Height 和 Width 除以 2 那么它看起来像:

前三行的大小如我所愿，但四行的宽度看起来不合适(直到行尾。)。如何纠正？而且，如何减少 div 之间的空间？

附言。一些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;     
}

谢谢，对不起我的英语。

Answer 1

<罢工>这很简单，第四行是你想要的宽度的一半，因为你划分了 Width by 2. 只为第四行不要除Width 2，但只有 Height , 它将填充到行尾。

或者看看这个方法，我刚刚意识到这可能是你想要的:您决定在哪里划分 Width和 Height除以 2，也将 X 除以和 Y乘以 2，然后正常输出。您将得到与原始图像相似但大小减半的最终结果。