这就是我想要做的。当网站缩小到中小尺寸时，我希望宽度为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;
}
很抱歉浪费任何人的时间，但是已经很晚了，我可能错过了一些非常简单的东西。几年后，我将重新使用编码，任何帮助将不胜感激。
在CSS中，当您指定宽度时，通常表示内部宽度而不是外部宽度。
外部宽度=内部宽度+边距+填充+边框
在您的情况下，您的div变为100％+ 20px（左侧填充）+ 20px（右侧填充）
添加时display: block，div将自动尝试占用尽可能多的宽度。
当然，在CSS 3中，您可以利用focorner建议的box-sizing属性。但是为了兼容，我建议删除width: 100%和添加display: block。
为此，您需要一个外部div，其宽度为100％，并且 display:block
TL; DR
{
display: block;
// width: 100%; remove this
padding: 20px
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句