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;
}
ボックスの 1 つに他のボックスよりもテキストが少ない場合、インラインで表示されなかったので、それを修正できると考えて min-height / height を追加してみました。それはすべてのボックスのサイズを一致させますが、それでもテキストの少ないものを 1 行に減らします。空行を追加するだけでこれを修正する方法はありますか?
ありがとう