Javascript 调整元素大小和浏览器窗口大小

我有一个带有多个按钮的容器，这些按钮是绝对定位的。我想根据浏览器窗口的宽度调整这些按钮的大小。所以按钮的大小和位置应该改变。 它看起来有点像一个棋盘，但可能有洞

<div id="seats">
   <div class="row">
   <input type="button" class="seat"/>
   <input type="button" class="seat"/>
   <input type="button" class="seat"/>
   <input type="button" class="seat"/>
   </div>
   <div class="row">
   <input type="button" class="seat"/>
   <input type="button" class="seat"/>
   </div>
</div>

---

恐怕简单的css是不够的。Seat元素由服务器端代码生成，每个元素都是绝对定位的（通过内联css），因此似乎需要某种JS代码

您可以在绝对坐标中给出简单的百分比。但是您需要为不同的成员“seat”类指定不同的位置，这是非常不切实际的

我认为在你的情况下，最好的解决方案是：

<style>
.seats {
   display: block;
   position: relative;
}

.seat {
   display: inline-block;
   position: static;
   width: 25%;
   height: 10%;
}
</style>
<div id="seats">
   <input type="button" class="seat"/>
   <input type="button" class="seat"/>
   <input type="button" class="seat"/>
   <input type="button" class="seat"/>
   <input type="button" class="seat"/>
   <input type="button" class="seat"/>
</div>

.座位{
显示：块；
位置：相对位置；
}
.座位{
显示：内联块；
位置：静态；
宽度：25%；
身高：10%；
}

我还建议大家学习一下流体设计

如果您需要始终且仅需要绝对标记，可能是因为某些非常深奥的原因，这里有一个解决方案：

<style>
#seat1 {
   display: block;
   position: absolute;
   left: 13%;
   right: 19%;
   top: 17%;
   bottom: 29%;
}

#seat2 {
   display: block;
   position: absolute;
   left: 18%;
   right: 23%;
   top: 45%;
   bottom: 67;
}

// And any other seat-declaration, with its absolute coordinates!

</style>
<div id="seats">
   <input type="button" id="seat1"/>
   <input type="button" id="seat2"/>
   <input type="button" id="seat3"/>
   <input type="button" id="seat4"/>
   <input type="button" id="seat5"/>
   <input type="button" id="seat6"/>
</div>

#seat1{
显示：块；
位置：绝对位置；
左：13%；
右：19%；
最高：17%；
底部：29%；
}
#座位2{
显示：块；
位置：绝对位置；
左：18%；
右：23%；
最高：45%；
底部：67；
}
//和任何其他座位声明，及其绝对坐标！

所以我会按照你在这里写的做

---

但是警告：我确信，你做了一些可怕的事情。

添加css以帮助你。或者设置fiddle或jsbin。尝试读取引导css。它们包含一些类，如col xs、col sm、col md等@Igle我知道这一点。问题是我不知道如何开始。请编辑你的问题，我无意中投了反对票，尽管我想投赞成票。这并不是那么容易。A我说-元素必须绝对定位，因为整个座椅结构是不规则的。我制定了我的答案。好的，但目前我认为我目前的解决方案有效。是这样吗？