html - Div 不能像 inline-block 一样正确

Question

我确实有一些 HTML 和 css 代码，我希望我的 divs(计算器)以与顶部相同的边距内联显示，但它们只是不会像我想要的那样正确地放入盒子中。一个位置低于另一个，依此类推。

HTML

<div id="box">
    <div class="table" id="table">
        <div id="header">Kalkulatory macierzowe</div>
        <div id="row">
            <div id="table1">
                <div class="header">Wyznacznik [2x2]</div>
                <form id="row1">
                    <input type="text" class="det1" />
                    <!--first row-->
                    <input type="text" class="det1" />
                </form>
                <form id="row2">
                    <input type="text" class="det1" />
                    <!--second row-->
                    <input type="text" class="det1" />
                </form>
                <div class="count" onclick="det(2,'det1')"><a href="#">Wylicz</a>
                </div>
                <input type="text" id="calcValue2" />
            </div>
            <div id="table2">
                <div class="header">Wyznacznik [3x3]</div>
                <form id="row1">
                    <!--first row-->
                    <input type="text" class="det" />
                    <input type="text" class="det" />
                    <input type="text" class="det" />
                </form>
                <form id="row2">
                    <!--second row-->
                    <input type="text" class="det" />
                    <input type="text" class="det" />
                    <input type="text" class="det" />
                </form>
                <form id="row3">
                    <!--third row-->
                    <input type="text" class="det" />
                    <input type="text" class="det" />
                    <input type="text" class="det" />
                </form>
                <div class="count" onclick="det(3,'det')"><a href="#">Wylicz</a>
                </div>
                <input type="text" id="calcValue1" />
            </div>
            <div id="table3">
                <div class="header">Macierz odwrotna [2x2]</div>
                <form id="row1">
                    <input type="text" class="det2" />
                    <!--first row-->
                    <input type="text" class="det2" />
                </form>
                <form id="row2">
                    <input type="text" class="det2" />
                    <!--second row-->
                    <input type="text" class="det2" />
                </form>
                <div class="count" onclick="det(2,'det2')"><a href="#">Wylicz</a>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.table {
    position:relative;
    top:0;
    padding:0;
    height:100%;
    border-collapse:collapse;
}
#table {
    border-collapse:collapse;
    border-right:2px inset rgb(0, 0, 0);
    border-left:2px inset rgb(0, 0, 0);
    border-top:2px inset rgb(150, 150, 150);
    border-bottom:none;
    width:1067px;
    min-width:1067px;
    height: 599px;
    min-height: 599px;
    margin:auto;
}
#table1 {
    position:relative;
    display:inline-block;
    width:270px;
    min-width:270px;
    height:155px;
    min-height:155px;
    margin-left:3px;
    border:2px inset rgb(0, 0, 0);
    border-collapse:collapse;
    background:rgba(0, 0, 0, 0.2);
}
#table2 {
    position:relative;
    display:inline-block;
    width:300px;
    min-width:300px;
    height:155px;
    min-height:155px;
    border:2px inset rgb(0, 0, 0);
    border-collapse:collapse;
    background:rgba(0, 0, 0, 0.2);
}
#table3 {
    display:inline-block;
    width:320px;
    min-width:320px;
    height:155px;
    min-height:155px;
    border:2px inset rgb(0, 0, 0);
    border-collapse:collapse;
    background:rgba(0, 0, 0, 0.2);
}

Answer 1

在某些情况下，我看到显示为 inline-block 的元素沿基线排列。在 jsFiddle 中玩它，我可以使用 vertical-align 将它们从顶部或底部排列起来。您在 inline-block 元素上尝试过吗？

vertical-align: top;

(更改 div CSS 的 jsFiddle 中的 vertical-align 值将显示所描述的行为。)