調整大小的元素和瀏覽器窗口大小

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> 

所以會做它，你寫到這裏到底是什麼。

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