CSS最小寬度/保證金比例問題

<html> 
<head> 
<style type="text/css"> 
body{ 
    background-color:#000; 
    background-image:url(../i/bck.gif); 
    font-family:"Helvetica Neue",Arial,sans-serif; 
    font-size:12px; 
    color:#fff; 
    height:100%; 
    margin:0; 
} 
#wrap{ 
    min-width:1000px; 
    width:68%; 
    margin:0 16%; 
    height:100%; 
    background-color:red; 
} 
</style> 
</head> 
<body> 
<div id="wrap">a</div> 
</body> 
</html>

編輯：CSS最小寬度/保證金比例問題

我有一點點的代碼搞砸了，並發現問題停留在最小寬度。如果您調整瀏覽器的尺寸（縮小），您會發現它左側的邊距保持在16％，而寬度不再是68％，而是1000px，當瀏覽器窗口的寬度可能會超過68％更小。現在，問題是有人知道這個解決方法嗎？

示例1：瀏覽器寬度：2000px，div寬度：68％ - > 1360px，空白左邊+右邊：16％ - > 320px。

示例2：瀏覽器寬度：1200px，div寬度：1000px（min），空白左邊+右邊：16％ - > 192p每個。

例2是問題所在。由於68％的瀏覽器小於1000像素，div的寬度爲1000像素。 1000px + 192px + 192px不等於1200px的瀏覽器的完整大小。

來源

2012-01-20 Daku Daku

你的html看起來像什麼？ – Arjan

我在iphone上發佈了原始問題，意識到我並不全面。我編輯了原始問題。看看你現在是否有解決方案。 –

我剛剛測試了這個概念，它似乎按預期工作。

<div>foo</div>

和CSS：

div { width: 80%; margin: 0 10%; }

你的選擇是一個id，除非div有id="div"，選擇必須改變。屬性的大小寫很重要。

來源

2012-01-21 02:54:17

我在iPhone上發佈了原始問題，意識到我並不全面。我編輯了原始問題。看看你現在是否有解決方案。 –

嘗試增加：

#wrap { 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    width: 100%; 
    min-width: 1000px; 
    margin: 0 16%; 
}

來源

2012-01-21 05:19:08

我不確定這是應該做什麼，但它在我的情況下沒有做任何事情。 –

問題是這一行：

margin: 0 16%;

除了指定利潤率左和利潤率右的，你也可以讓瀏覽器計算它們：

margin: 0 auto;

這樣，如果您的#wrap爲68％寬，您的利潤率將是16％（或17％，但舍入不是你的問題）。如果您的#wrap寬度爲1000px，那麼左右邊距仍然相等。但他們將不到16％。

只要完整，你的html應該從一個有效的doctype聲明開始。

來源

2012-01-21 09:57:55 Arjan

哦，這讓我瘋狂。保證金：0汽車;不適用於position：absolute。我通過添加另一個包裝器並在其後做出所有相關的事情來佔據絕對位置。此外，這不是實際的HTML/CSS，但只是我放在一起來測試爲什麼我的網頁不工作。是它的CSS，頁面上的另一個元素或什麼。謝謝。 –

CSS最小寬度/保證金比例問題

回答

相關問題