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; 

（改變在jsFiddle的vertical-align價值爲div CSS會顯示所描述的行爲。）

Answer 2

添加float: left;您#table S：

http://jsfiddle.net/ysRKR/