如何使用CSS在我的網站上實現流體邊距？

在我的網站上，我有一個固定寬度的中央包裝，我不想改變尺寸，但我希望根據用戶的屏幕大小調整邊距。我嘗試將所有內容封裝在一個名爲wrapper-outer的div中，然後通過margin：0自動居中，但似乎不起作用。如何使用CSS在我的網站上實現流體邊距？

網站：http://antonpug.com/mainepark/

CSS：

body { 
    font-family: "Nobile", sans-serif; 
    font-size:0.75em; 
    text-align:center; 
    min-width:1550px; 
} 

img#bg { 
    position:fixed; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    z-index:-1; 
} 

h3 { 
    font-size:1.25em; 
} 

header h1, header h2 { 
    font-family: "Ubuntu", sans-serif; 
} 

header h1 { 
    font-size:3em; 
    margin:25px 0 0 0; 
} 

header h2 { 
    font-size:2em; 
    margin:0 0 25px 0; 
} 

#wrapper-inner { 
    margin:25px 100px 25px 100px; 
    padding:15px 0 15px 0; 
    background-color:rgba(255,255,255,0.75); 
    moz-border-radius: 10px; 
    webkit-border-radius: 10px; 
    border-radius: 10px; 
} 

#wrapper-outer { 
    width:1500px; -- that didn't work either!!! 
    margin: 0px auto; 
} 

#feature { 
    display:inline-block; 
    width:80%; 
    margin:15px; 
} 

.column { 
    display: inline-block; 
    vertical-align:top; 
    width:600px; 
    margin:15px; 
} 

#col-1 { 
    text-align:right; 
} 

#col-2 { 
    text-align:left; 
} 

.section { 
    margin:0 0 25px 0; 
    height:450px; 
} 

footer { 
    color:#909090; 
} 

footer a { 
    margin: 0 0 25px 0; 
    text-decoration:none; 
    color:#909090; 
}

來源

2012-03-01 antonpug

將身體設置爲100％的寬度 – 2012-03-01 18:58:07

刪除身體的最小寬度。如果主體的最小寬度大於內容包裝，則滾動條會在流體邊距可以完成之前顯示。

變化div#wrapper-inner到邊距：

margin: 25px 0; //previous values had 100px margins for left/right which add to width per box model

最後，調整div#wrapper-outer到您的內容，如SLaks的寬度建議。

來源

2012-03-01 18:57:45 shaunsantacruz

你需要一個固定的寬度增加了中心的包裝。

來源

2012-03-01 18:35:23 SLaks

我做了，不起作用：/ – antonpug 2012-03-01 18:35:54

只需在您的col-1 div中添加一個百分比保證金，這樣您的利潤率就會流暢地適應。

類似8%看起來不錯。

CSS

#col-1 { 
margin-right: 8%; 
}

此外，解除您col-2 DIV保證金聲明，使你的利潤按比例調整。

來源

2012-03-01 19:39:39

如何使用CSS在我的網站上實現流體邊距？

回答

相關問題