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