Divs不能正确匹配内联块

Question

我确实有一些HTML和css代码，我希望我的div s（计算器）内嵌显示与顶部相同的边距，但它们不适合盒子正确，因为我想。一个位于低于另一个的位置，依此类推。

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;

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

Answer 2

将float: left;添加到#table s：

http://jsfiddle.net/ysRKR/