CSS:尝试使用 display:table 和 display:table-cell 属性

Question

我最近使用了 display:table 和 display:table-cell 属性。

原来是这样

<div id="main" style="display:table">
<div id="left-menu" style="display:table-cell">
Some menu links
</div><!-- End left-menu -->

<div id="content" style="display:table-cell">
The actual content
</div><!-- End content -->

</div><!-- End main -->

我使用它是因为左侧菜单的背景颜色延伸到底部，我的意思是它的高度等于内容 div。所以我不必在我的主 div 中使用背景 img，我必须重复 y。

但问题是菜单链接位于左侧菜单 div 的中心，而不是顶部，这是必需的。

然后我不得不使用 position:absolute 和 top:0 将菜单放在左侧菜单 div 的顶部。这看起来不合适。

有人遇到过这个问题吗？

Answer 1

您可以使用 faux columns模拟缩放主要内容和侧边栏 div 的背景图像。