CSS显示表格宽度溢出
问题描述:
我的页面上有两个元素,像报纸页面上的文章一样排列在一起。其中一个元素是<aside>
标记,主要内容为<section>
标记。CSS显示表格宽度溢出
容器的左侧有15px的余量,当宽度设置为100%
时,容器溢出视口的右侧。我怎样才能防止它做到这一点。
你可以从这个小提琴看到例如:http://jsfiddle.net/spryno724/BHr5F/2/
注:我知道我可以使用calc()
函数来完成这个任务,但鉴于its current browser support,和我的观众,我还没准备好依靠关于这个功能。
答
最简单的方法是使用填充左的.row容器,而不是保证金,留在内容可以在我更新的jsfiddle可以看出:
div.row {
background-color: rgba(51, 51, 51, 0.9);
display: table-row;
padding-left: 15px;
}
+0
我试过了。您可以看到边栏左侧的填充现在不见了。 –
答
添加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%;
}
您还可以使用box-sizing: border-box;
计算宽度属性包括填充和边界。并删除水平滚动条:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
我没有得到它,你能解释一下? –
@HashemQolami看一下JSFiddle链接,你可以在结果窗口看到你必须向右滚动才能看到所有的内容。这是因为'margin-left:15px'和'width:100%'。我正在尝试将这些内容放在窗口中。 –