防止網站調整大小

Question

在我目前正在修復的網站上顯示兩個div inline。

在調整瀏覽器窗口的大小時，右側div將自動對齊，以適應第一個div而不是保持內聯。我的問題是如何防止這種調整大小，並保持所有屏幕尺寸的標準。

要顯示此問題，我附上了兩個屏幕截圖。

另一個問題：屏幕是垂直滾動這不應該是的情況下作爲html，body高度或任何div的是不大於100％

我的兩個主要div的CSS如下：

#menu{ 
    position:absolute; 
    width:15%; 
    height:600px; 
    float:left; 
    margin-top: 10px; 
    margin-left: 40px; 
} 

#content{ 
    position: absolute; 
    height:600px; 
    width:73%; 
    float:left; 
    margin-top: 10px; 
    margin-left: 290px; 
} 

是內4個格的CSS如下

.gallery-image-rest{ 
    background: url('../images/thumbs/rest.jpg'); 
    position: relative; 
    height:600px; 
    width:24%; 
    float: left; 
    margin-left: 15px; 
    /*display: inline-block;*/ 
    text-align: center; 
    } 
.gallery-image-replenish{ 
    background: url('../images/thumbs/Replenish.jpg'); 
    position: relative; 
    height:600px; 
    width:24%; 
    float: left; 
    margin-left:3px; 
    /*display: inline-block;*/ 
    text-align: center; 
    } 

.gallery-image-rejuvenate{ 
    background: url('../images/thumbs/Rejuvenate.jpg'); 
    position: relative; 
    height:600px; 
    width:24%; 
    float: left; 
    margin-left:3px; 
    /*display: inline-block;*/ 
    text-align: center; 
    } 

.gallery-image-reunite{ 
    background: url('../images/thumbs/reunite.jpg'); 
    position: relative; 
    height:600px; 
    width:24%; 
    float:left; 
    margin-left:3px; 
    /*display: inline-block;*/ 
    text-align: center; 
    } 

的代碼有很多冗餘的，但是這是第二優先級客戶需要的顯示以先天下之憂正確。

謝謝你們。

Answer 1

限制大小固定的比例，因爲要保持文本里面的一些框使網站更加難以爲一些人所使用。默認情況下，我的瀏覽器設置爲125％縮放，這樣我可以在某些困難的情況下閱讀我訪問的大多數網站上的文本。理想情況下，我希望它變得更大，但如此多的網站不考慮這一點，並且網站變得無法使用。事實上，有些人視力不好，或者只是老年人，他們現在看來很難閱讀小文本，似乎從未出現過。他們可以閱讀，所以一切都與世界正確。

我建議如果你改變你的設計，你使用百分比來表示你的內容寬度，你也應該使用百分比來表示你的邊距/填充值，而不是固定的PX值。這樣，您的網站就可以保持其總體佈局，並且文本會變得更容易閱讀，適合像我這樣的人。

#menu{ 
    position:absolute; 
    width:15%; 
    height:600px; 
    float:left; 
    margin-top: 1%; 
    margin-left: 0.5000%; 
} 

#content{ 
    position: absolute; 
    height:600px; 
    width:73%; 
    float:left; 
    margin-top: 1%; 
    margin-left: 16%; 
} 

併爲您的每個內部div更改所有margin-left：3px;到

margin-left:0.5000%; 

Answer 2

指定元素的min-width將會阻止自動調整大小。

body { 
    min-width: 1280px; // change width as needed to fit your page 
}