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

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

你可以通过CSS媒体做查询http://css-tricks.com/css-media-queries/

或者与jquery事件window.resize（）http://api.jquery.com/resize/

Answer 2

你可以给绝对坐标简单百分比。但是，你需要给不同的成员“座位”班级提供不同的职位，这是非常不切实际的。

我觉得你的情况最好的解决办法是有的，如：

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

所以会做它，你写到这里到底是什么。

但警告：我相信，你做了一件可怕的事情。