通过坐标来定位div

我需要在网站上绘制大厅的平面图。大厅是在第三方程序中绘制的。该计划给了我馆的计划，在每个地方的坐标的形式：通过坐标来定位div

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块的大小，例如两次。如果我除以2 Height和Width那么它看起来像： 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;  
}

谢谢和抱歉我的英语。

来源

2012-03-16 user348173

注：'位置：absolute'和'浮动：left'不在一起工作。我打算说，删除位置：绝对，让所有东西都滑动到位，但看起来你的代码为每个“div”生成x和y位置。我们需要查看更多代码，这些代码会生成'div'的属性。 – rgin 2012-03-16 08:41:26

@rgin：如果我删除'float'，则没有任何变化。 'x'和'y'不生成，它们来自第三方程序。 – user348173 2012-03-16 08:44:57

~~这很简单，第四行是成功的一半，你想，因为你除以2。 Width只为第四排 不是Width 2做鸿沟的宽度，但只有 Height，它将填充直到行的末尾。~~

或者看看这种方法，我才意识到这可能是你想要什么：如果你决定来划分Width和Height 2，还划分X和Y 2，然后输出为定期。您将获得与原始图像相似的最终结果，但尺寸只有原来的一半。

来源

2012-03-16 08:47:22 Bazzz

谢谢。但是如何知道我什么时候需要删除？ – user348173 2012-03-16 08:50:28

当第三方程序为您提供的“宽度”超过“高度”时，您知道它不是正方形。也看看我的替代建议，我认为这是你可能会后，因为你也想减少之间的空间。 – Bazzz 2012-03-16 08:55:12

是的，我也划分了'X'和'Y'以及所有作品。谢谢。还有一个问题：现在，div之间有小的空间。如何使它变大？ – user348173 2012-03-16 09:11:47

那么你可以尝试添加在样式表如下：

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

来源

2012-03-16 08:49:27

如果在最后一行将是一个div有宽度半行和一个小格 – user348173 2012-03-16 08:55:54

听起来像打架的症状而不是问题，只是我的意见。 – Bazzz 2012-03-16 08:59:06

通过坐标来定位div

回答

相关问题