0

未对齐的部分

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 认为它会修复它。它使所有框大小一致,但仍将文本较少的框击倒一行。有什么方法可以解决这个问题而无需添加一个空行?

谢谢

4

1 回答 1

3

添加vertical-align: top到您的 CSS。附带说明一下,考虑使用类而不是 id 来重复出现样式。

于 2012-11-19T15:10:49.667 回答