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％+ 20px（左边填充）+ 20 px（右边填充）

当您添加display: block时，div会自动尝试占用尽可能宽的广告。

当然，在CSS 3中，你可以像focorner建议的那样利用box-sizing属性。但为了兼容，我建议删除width: 100%并添加display: block。

要使其正常工作，您需要一个宽度为100％并且为display:block

的外部div

<强> TL; DR

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

Answer 2

一个简单的选择是使用：

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

Answer 3

你可以做到这一点的一种方法是创建一个外部div，它填充整个页面，并将其设置为左右两个20px的填充。

然后你可以在内部放置一个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;
}

div为100％宽度，内容区域两侧的边距相等

4 个答案: