CSS显示表宽度溢出

Question

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

容器的左侧留有15px的边距，当其宽度设置为100%时，会使其溢出视口的右侧。 我如何防止它那样做。

您可以从此小提琴中看到示例： http : //jsfiddle.net/spryno724/BHr5F/2/

注意：我知道我可以使用calc()函数来完成此任务，但是鉴于其当前的浏览器支持以及我的读者，我还不准备依赖此函数。

Answer 1

最简单的解决方案是在.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/

Answer 2

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

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

Answer 3

将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