Question

我找不到或尝试过的任何东西都在工作，所以我希望有人可以告诉我哪里出错了。我有一个类似于表的HTML结构，div行只包含span个单元格。这些可以包含单个span或两行span s。不幸的是，由于某种原因，我一直在打几个星期，单个span单元do not align with the double-row cells进行摔跤。

最小的HTML是：

    <div id="box">

        <div id="rowA" class="row">
            <span class="container">
                <span class="top">A</span>
                <span class="bottom">B</span>
            </span>
            <span class="container">
                <span class="single">C</span>
            </span>
        </div>

        <div id="rowB" class="row">
            <span class="container">
                <span class="top">D</span>
                <span class="bottom">E</span>
            </span>
            <span class="container">
                <span class="single">F</span>
            </span>
        </div>

    </div>

使用CSS，

body {
    font-size: 16px;
}
div#box {
    width: 716px;
    height: 255px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
}
div.row {
    width: 712px;
    height: 47px;
    padding: 1px;
    padding-left: 4px;
    margin-left: auto;
    margin-right: auto;}
span.container {
    display: inline-block;
    width: 40px;
    height: 40px;
    margin-top: 2px;
    padding: 1px;
    border: 1px solid black;
    border-radius: 4px;}
span.top, span.bottom {
    display: inline-block;
    width: 100%;
    height:  50%;
    line-height: 20px;
    vertical-align: middle;
}
span.single {
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: 40px;
    vertical-align: middle;
    text-align: center;
}

双行单元格（例如DE）正确显示，单行单元格由于某种原因向下移动。我知道我可以使用定位来纠正问题，但我想知道我哪里出错了。它已经在Chrome和Firefox上进行了测试，而且他们的检查员让我更加明智。

非常感谢所有的贡献！

Answer 1

body {
    font-size: 16px;
}

div#box {
    width: 716px;
    height: 255px;
  margin: 10px auto;
}
div.row {
    width: 712px;
    height: 47px;
    padding: 1px;
    padding-left: 4px;
    margin-left: auto;
    margin-right: auto;
}
span.container {
    vertical-align:top;    /* ADD JUST THIS LINE */
    display: inline-block;
    width: 40px;
    height: 40px;
    margin-top: 2px;
    padding: 1px;
    border: 1px solid black;
    border-radius: 4px;
}
span.top, span.bottom {
    display: inline-block;
    width: 100%;
    height:  50%;
    line-height: 20px;
    vertical-align: middle;
}
span.single {
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: 40px;
    vertical-align: middle;
    text-align: center;
}

div行中嵌套跨距的垂直对齐方式

1 个答案: