Question

请看this example。我打算用纯html / css制作水平布局，不要打扰旧浏览器。我用display: table技术制作了它。但是显示主文本容器（浅黄色）成了问题。每个都有overflow: hidden以防止垂直滚动。后来，我打算在底部添加一些阴影效果。现在，我想制作80％的高度，顶部和底部的边距为10％。但我得到的是带有较大文本的容器，可以拉伸所有父母容器（浅绿色），因此80％的容器变得太多了。

有没有办法在没有javascript的情况下避免它？

也许我可以获得任何高度的文本容器，但底部有一些边距。我将不胜感激任何解决方案。

Answer 1

不要使用表格布局，表格单元格在设置宽度/高度时会出现问题，因此无法遵循溢出规则。
更新layout.css中的以下css属性，这将帮助您入门：

#content{
    display:block;
    height:90%;
    overflow:hidden;
    vertical-align:top;
}

#content-inner{
    display:block;
    height:100%;
    vertical-align:top;
}

.article{
    display:inline-block;
}

Answer 2

目前还不清楚你想要什么;也许张贴快速草图？

无论如何，我想避开水平滚动条。为此，设置#content { width: 61%;}（基于CSS的其余部分）。目前，在 layout.css 中，#content width设置为305％。

RE

@Brock Adam，我的意思是我想让div.article-content 80％的屏幕，而不是父容器的80％。我相信这可以通过强制父div＃内容完全是屏幕的100％来实现，而不是更多。但我不知道如何。

div.article-content目前在页面中出现5次。将其设置为屏幕的80％将使页面比用户可以看到的页面宽至少400％。

问题：

第一个div被ID标记为“标题”，但它向左浮动，只有39％宽。这是标题（页面顶部的栏）还是左侧边栏？
这些文章应该放在同一行的5个小列中，还是应该是一个接一个，向下滚动页面？

同样，示例页面的语句和语义也不清楚。发布所需布局的快速草图将有助于我们为您提供帮助。

如何使溢出：隐藏真的隐藏内容？

2 个答案: