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/