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 认为它会修复它。它使所有框的大小一致，但它仍然将文本较少的框排在一行中。有什么方法可以解决这个问题而不仅仅是添加一个空行吗？
谢谢
最佳答案
将 vertical-align: top 添加到您的 CSS。附带说明一下，考虑使用类而不是 id 来重复出现样式。
关于html - 多个部分设置为行内 block ，当其中一个部分的文本少行时，它会错位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13456413/