CSS显示表格宽度溢出

我的页面上有两个元素，像报纸页面上的文章一样排列在一起。其中一个元素是<aside>标记，主要内容为<section>标记。CSS显示表格宽度溢出

容器的左侧有15px的余量，当宽度设置为100%时，容器溢出视口的右侧。我怎样才能防止它做到这一点。

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

注：我知道我可以使用calc()函数来完成这个任务，但鉴于its current browser support，和我的观众，我还没准备好依靠关于这个功能。

来源

2013-08-21 Oliver Spryn

我没有得到它，你能解释一下？ –

@HashemQolami看一下JSFiddle链接，你可以在结果窗口看到你必须向右滚动才能看到所有的内容。这是因为'margin-left：15px'和'width：100％'。我正在尝试将这些内容放在窗口中。 –

最简单的方法是使用填充左的.row容器，而不是保证金，留在内容可以在我更新的jsfiddle可以看出：

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

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

来源

2013-08-21 21:04:38 Dragony

我试过了。您可以看到边栏左侧的填充现在不见了。 –

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

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

来源

2013-08-21 21:05:37 Joram

添加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

来源

2013-08-21 21:29:57

CSS显示表格宽度溢出

回答

相关问题