html - CSS 显示表格宽度溢出

Question

我的页面上有两个元素放在一起列在报纸页面上的文章中。一个元素是<aside>标签，主要内容在<section>标签内。

容器左侧有 15px 的边距，当其宽度设置为100%。我怎样才能防止它这样做。

你可以从这个小提琴中看到这个例子：http: //jsfiddle.net/spryno724/BHr5F/2/

注意：我知道我可以使用该calc()功能来完成此任务，但鉴于其当前的浏览器支持和我的受众，我还没有准备好依赖此功能。

Answer 1

这里有很多很好的答案。我最喜欢的是：

.container {
    width:90%;
    margin: auto;
}

Answer 2

添加padding-left: 15px到body元素并从中删除边距section.container：

body {
    margin: 0;
    padding-left: 15px;
}

section.container {
    border: 1px solid black;
    display: table;
    max-width: 100%;
    overflow: hidden;
    table-layout: auto;
    width: 100%;
}

JSFiddle 演示 #1

您还可以使用box-sizing: border-box;包括填充和边框来计算宽度的属性。并删除水平滚动条：

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

JSFiddle 演示 #2

Answer 3

最简单的解决方案是在 .row 容器上使用 padding-left 而不是在内容上使用 margin-left，如我更新的 jsfiddle 所示：

div.row {
    background-color: rgba(51, 51, 51, 0.9);
    display: table-row;
    padding-left: 15px;
}

http://jsfiddle.net/BHr5F/4/