如何讓div爲每個屏幕大小/分辨率自動調整水平大小？

我無法在自己的頁面上獲取灰色框https://com-bb-dev.com.edu，以便在每個分辨率上自動調整其上方兩個框上的邊框寬度。在1440x900上它看起來很正常，或者我希望它爲每個用戶尋找，但是我在這裏以不同的分辨率使用我的第二臺顯示器來測試這類問題。如何讓div爲每個屏幕大小/分辨率自動調整水平大小？

這裏是我到目前爲止已經試過：

#loginText { 
padding: 12px 80px 18px 80px; 
background: #5f6062; 
display: inline-block; 
width: 912px; 
border-top: 6px solid #DADADA; 
margin-left: 10.6%; 
text-align: center; 
}

默認情況下，這個div沒有顯示爲一個行內框。無論出於何種原因，它的整個容器佔據了屏幕的整個寬度（據我所知，這是默認的）。謝謝。

來源

2013-07-24 Christopher Bruce

您在該網站上有一個SSL錯誤... – Tdelang

這是因爲它是我們的Blackboard開發實例。它沒有一個有效的SSL證書，因爲我們只將它用於內部測試目的。這是安全的，我可以向你保證... –

嘗試添加媒體查詢在你的CSS文件中爲這個元素，或者設置寬度爲60％，並且margin：0 auto; ' @media屏幕（最大寬度：600像素）{ #loginText { 寬度：600px的 } }' – niklaz

你需要做以下更改#loginText CSS：

Remove padding-right: 80px; 
Remove padding-left: 80px; 
Change margin-right: auto; 
Change margin-left: auto; 
Add width: 1072px;

您的問題是，你的利潤是按百分比計算，它可以擴展對所有決議。上面的框是一個絕對大小（1072px）;這應該使它匹配並居中。

來源

2013-07-24 15:01:40 wilso132

我已恢復訪問該網站。我不以任何方式隸屬於國家安全局:) –

做了一個正確大小的編輯 - 這將解決您的問題。 – wilso132

完美，謝謝wilso132。 –

我想我明白你想問什麼。灰盒子的寬度並不總是與上面兩個盒子的寬度匹配的原因是因爲當上盒子具有設置寬度時，灰盒子使用瀏覽器窗口寬度調整大小（因爲它在兩側具有百分比邊際）。

修改你的風格定義是：

#loginText { 
    background: none repeat scroll 0 0 #5F6062; 
    border-top: 6px solid #DADADA; 
    margin: 0 auto; 
    padding: 12px 0; 
    text-align: center; 
    width: 1072px; 
}

而且我相信，給你你正在尋找的行爲。如果這不是您要找的，請告訴我，我很樂意進一步幫助。祝你好運！

來源

2013-07-24 15:06:14 Serlite

我想測試這個，因爲你付出了努力回覆，而且它也行得通。我只是已經實現了其他答案。我希望我有足夠的聲譽來投票你的答案！謝謝你，Serlite。 –

哈哈，沒關係。只要你的問題得到解答！ – Serlite

如何讓div爲每個屏幕大小/分辨率自動調整水平大小？

回答

相關問題