HTML:
<section id="minibox"><h3>Shop</h3><i>The store module. Manage your products, payment methods and more.</i><br /><a title="Remove" href="#" style="float:right; margin:10px 0 0 10px;" class="content-btn-small">-</a><a href="#" style="float:right; margin:10px 0 0 0;" class="content-btn-small">Edit</a></section>
<section id="minibox"><h3>Comments</h3><i>The comment module. Allows comments on pages you choose.</i><br /><a title="Remove" href="#" style="float:right; margin:10px 0 0 10px;" class="content-btn-small">-</a><a href="#" style="float:right; margin:10px 0 0 0;" class="content-btn-small">Edit</a></section>
<section id="minibox"><h3>Other</h3><i>The store module. Manage your products, payment methods and more.</i><br /><a title="Remove" href="#" style="float:right; margin:10px 0 0 10px;" class="content-btn-small">-</a><a href="#" style="float:right; margin:10px 0 0 0;" class="content-btn-small">Edit</a></section>
<section id="minibox"><h3>Other</h3><i>Test module for layout testing purposes, more text to make the box larger to see how it handles it.</i><br /><a title="Remove" href="#" style="float:right; margin:10px 0 0 10px;" class="content-btn-small">-</a><a href="#" style="float:right; margin:10px 0 0 0;" class="content-btn-small">Edit</a></section>
<section id="minibox"><h3>Other</h3><i>Test module for layout testing purposes, more text to make the box larger to see how it handles it.</i><br /><a title="Remove" href="#" style="float:right; margin:10px 0 0 10px;" class="content-btn-small">-</a><a href="#" style="float:right; margin:10px 0 0 0;" class="content-btn-small">Edit</a></section>
CSS:
#minibox {
width: 18%;
margin: 10px 1%;
padding: 10px;
display: inline-block;
background: #EEE;
text-align:center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
height:142px;
}
当其中一个框的文本少于其他框时,它没有显示内联,所以我尝试添加 min-height / height 认为它会修复它。它使所有框大小一致,但仍将文本较少的框击倒一行。有什么方法可以解决这个问题而无需添加一个空行?
谢谢