0

我确实有一些 HTML 和css代码，我希望我div的 s(calculators) 以与顶部相同的边距内联显示，但它们不会像我想要的那样正确放入框中。一个比另一个低，以此类推。

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);
}
4

2 回答 2

2

在某些情况下，我已经看到inline-block沿基线排列的元素。在jsFiddle中使用它，我能够使用vertical-align. 你在你的inline-block元素上试过这个吗？

vertical-align: top;

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

于 2013-05-10T19:06:20.270 回答
1

添加float: left;到您#table的 s：

http://jsfiddle.net/ysRKR/

于 2013-05-10T19:08:10.597 回答