我确实有一些 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);
}
最佳答案
在某些情况下,我看到显示为 inline-block
的元素沿基线排列。在 jsFiddle 中玩它,我可以使用 vertical-align
将它们从顶部或底部排列起来。您在 inline-block
元素上尝试过吗?
vertical-align: top;
(更改 div
CSS 的 jsFiddle 中的 vertical-align
值将显示所描述的行为。)
关于html - Div 不能像 inline-block 一样正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16489114/