将 div 与显示水平对齐：table-cell

Question

我有一张桌子，里面有酒吧。我使用display: table-cell以对齐底部的内容。问题是容器divs 不再在其对应的THs 上水平对齐（它们的宽度未设置）

这是一个显示问题的jsFiddle

Answer 1

问题

\n\n

使用 - 属性时的问题table-cell是它的行为就像“真正的表格单元格”，而不再像block- 或 -inline元素。当父元素table-row和table丢失时，它们会匿名生成。所以盒子里会丢失所有类似的东西margin。

\n\n

您可以在这里阅读更多相关信息：“可视化格式化模型中的表格”

\n\n\n\n

我稍微重建了你的 HTML 结构，这似乎工作正常：

\n\n

演示版

\n\n

http://jsfiddle.net/insertusernamehere/XPSQG/

\n\n

CSS

\n\n

<style>\n\n    #graph th {\n        background:         red;\n    }\n\n    #graph td {\n        min-width:          30px;\n        margin:             0;\n        padding:            0;\n        color:              #222222;\n    }\n\n    #graph div {\n        display:            block;\n        position:           relative;\n        margin:             0 auto;\n        width:              30px;\n        max-width:          30px;\n        height:             100px;\n        background-color:   #EFEFEF;\n        border:             1px solid #000000;\n    }\n\n    #graph span {\n        position:           absolute;\n        left:               0;\n        top:                -20px;\n        width:              100%;\n        color:              #222222;\n        font-size:          16px;\n        line-height:        16px;\n        text-align:         center;\n    }\n\n    #graph p.color {\n        position:           absolute;\n        right:              0;\n        bottom:             0px;\n        width:              100%;\n        margin:             0;\n        color:              #222222;\n    }\n\n    #graph p.color.c1 {\n        background:         #0f0;\n    }\n\n    #graph p.color.c2 {\n        background:         blue;\n    }\xe2\x80\x8b\n\n</style>\n

\n\n

HTMI

\n\n

<div id="graph">\n    <table>\n        <tr>\n            <td><div><p class="color c1" style="height:20px;"><span>1</span></p></div></td>\n            <td><div><p class="color c2" style="height:30%;"><span>2</span></p></div></td>\n            <td><div><p class="color c1" style="height:40%;"><span>3</span></p></div></td>\n            <td><div><p class="color c2" style="height:50%;"><span>4</span></p></div></td>\n        </tr>\n        <tr>\n            <th>1</th>\n            <th>2</th>\n            <th>3</th>\n            <th>Some long value</th>\n        </tr>\n    </table>\n</div>\n

\n\n

怎么运行的

\n\n

它基本上将列的内容（绿色百分比<p>标签）放在底部。要将数字放在上面，您可以轻松地将它们放在<p>- 标签内，然后再次“将它们移出”。这是由这部分完成的：

\n\n

top:                -20px;\nfont-size:          16px;\nline-height:        16px;\n

\n\n

这表示行高和字体大小均为 16px。top: -16px设置将其完全移出就足够了- 额外的 4px 添加了一个很好的填充。:)

\n\n

希望你能明白。

\n\n

笔记

\n\n

您在某个地方使用了此属性：

\n\n

countunit="0_1_0"\n

\n\n

由于这不是有效的 HTML，请使用 -data前缀：

\n\n

data-countunit="0_1_0"\n

\n\n

这是有效的 HTML5，并且在旧版浏览器中也不会造成任何问题。

\n