【发布时间】：2012-04-29 08:58:03
【问题描述】：
我目前正在为我的主要内容区域设计一个具有这种设计和布局的网站： http://img528.imageshack.us/img528/9483/screenshot20120429at124.png
但是，我发现使用适当的语义编写 HTML 和 CSS 有点困难。
首先，我应该使用 div 来分割左右列，还是 HTML5 部分标签和图片的旁边标签？
其次，定位每个部分或区域的最佳方式是什么？
最后，话虽如此，在每个内容区域的底部都有 2 个应该水平内联的按钮。考虑到网站用户稍后将放置在他们自己的文本中并且两个按钮都应该随着更多的文本被放置在内部而进一步向下推动或定位自己这一事实，实现这一目标的最佳方法是什么。
这个 jsfiddle 目前是使它工作的原因......但是，似乎有问题？ http://jsfiddle.net/LGEKW/
如果这 2 个按钮在当前 div 中，我是使用绝对位置、相对位置还是浮动位置……我不知道。任何有关您如何进行此操作的帮助将不胜感激。
【问题讨论】：
-
您的 2 个按钮应位于 HTML 代码中各自列的末尾。如果你想让它们水平对齐，那就更复杂了。然后它们应该相对于底部的
#maincontent绝对定位，并且可以通过在后者上足够的 padding-bottom 来避免文本的叠加。按钮将显示在“填充区”中。 -
(cont) 如果两列都不是浮动的，而是
display: table-cell; vertical-align: top;（和#maincontent上的display: table; table-layout:fixed），那么这些按钮可以很容易地放置在底部，并且相对于它们的列具有绝对定位，并且与某些祖先无关。但是这个 display 的值与 IE8+ 兼容，你会被其他方法或 IE7 的 polyfills 卡住- -
感谢您快速回复费利佩。您能否在 jsfiddle 中证明这一点。如果问的有点多，我会理解的。