Question

我有一个带有多个按钮的容器，这些按钮绝对定位。我希望这些按钮根据浏览器窗口宽度调整大小。因此按钮大小及其位置应该改变。它看起来很像一个检查板，但有可能存在漏洞。

<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是不够的。座位元素由服务器端代码生成，并且每个元素都是绝对定位的（通过内联css）所以似乎某些JS代码是必要的

Answer 1

您可以在绝对坐标中给出简单的百分比。但是你需要给不同的成员提供不同的职位＆＃34; seat＆＃34;课程，这是非常不切实际的。

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

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

我建议稍微了解流体设计。

如果你总是需要绝对标签，这是一个解决方案，可能是因为一些非常深奥的原因：

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

所以你会完全按照你在这里写的那样去做。

但警告：我确信，你做的事情很可怕。

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

1 个答案: