在內容區域的兩側使div具有相等邊距的100％寬度

Question

以下是我想要做的事情。當網站中小尺寸時，我希望100％寬度，邊距：20px左右。我試圖不定義寬度的特定像素，以便儘可能在所有設備上保持一致。我認爲我的CSS會在右側和左側應用20px的邊距，但它只適用於左側，右側則在窗外。

這裏是我的HTML：

<div class="swipe-content"> 
    <div id="your-accounts"> 
     <h1>Your Accounts</h1> 
     <p> 
      Your accounts data will go here. 
     </p> 
    </div> 
</div> 

這是我的CSS：

.swipe-content { 
    clear: both; 
    width: 100%; 
    padding: 20px; 
    background-color: #fff; 
    margin-top: 20px; 
} 

對不起浪費任何人的時間與此，但它是晚，我可能失去了一些東西真的很簡單。幾年後，我會回到編碼，任何幫助，將不勝感激。

Answer 1

在當您指定的寬度CSS，這通常意味着內部寬度不外寬。

外寬度=內寬度+餘量+填充+邊界

在你的情況下，你的DIV是變100％+ 20像素（左填充）+ 20像素（右填充）

當添加display: block，div會自動嘗試佔用儘可能多的寬度。

當然，在CSS 3中，您可以像focorner建議的那樣利用box-sizing屬性。但爲了兼容，我建議刪除width: 100%並添加display: block。

對於這個工作，你需要擁有100％的寬度，是display:block

TL外格; DR

{ 
display: block; 
// width: 100%; remove this 
padding: 20px 
} 

Answer 2

一個簡單的辦法是使用方法：你可以這樣做

.swipe-content { 
    box-sizing: border-box; 
    ... 
} 

Answer 3

的一種方法是通過創建一個外的div填滿整個頁面，將其設置爲同時擁有20像素的左右填充。

然後，你可以把div放在適合100％外部div的內部。

#outer { 
    padding: 20px; 
    background-color: blue; 
} 

#inner { 
    width: 100%; 
    height: 500px; 

    background-color: grey; 
} 

這是在行動：https://jsfiddle.net/SplashHero/cb1xs67u/

Answer 4

你可以像這樣

.swipe-content { 
clear: both; 
width: 100%; 
padding: 20px; 
background-color: #fff; 
margin : 20px 20px 20px 20px; 
}