Question

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

容器左边有15px的边距，当它的宽度设置为100%时，会使其溢出视口的右侧。我怎么能阻止它这样做呢。

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

注意：我知道我可以使用calc()功能完成此任务，但鉴于its current browser support和我的受众，我还没准备好依赖此功能

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

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

.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 Demo #1

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

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

<强> JSFiddle Demo #2

CSS显示表宽度溢出

3 个答案: