html - 无论内容如何，​​我怎样才能使所有 h3 标题保持相同的高度？

Question

我在 Twitter Bootstrap 中的一行内有几个跨度。这些范围内是 <h3> header ，然后是 <img> , <p>等，有些论文的标题可能只有一两个词。有些可能有 5 或 6 个单词，这会导致更高的高度。这使得页面上剩余的内容看起来不稳定，因为图像高于或低于其余内容。如何根据最大标题中的内容量使所有标题标签保持相同的高度？或者我怎样才能使较大的标题中的内容缩小到一个大小以保持相同的高度？我认为这最后一种方法并不是我真正需要的。较小的文本可能看起来和最初的问题一样不稳定。

这导致的另一个问题是由于可能随时显示的内容量，我可能有比行要求更多的跨度。即:6 个 span4。这使得最后两个下拉并在行内开始他们自己的“行”。这很好并且需要，但是如果第二个 span4 下降得比其他的低，我最终会将两个较低的跨度推到右边，因为它们不能滑过那个跨度。如果第三个跨度较低，那么我最终会在最右边有一个跨度，而第三行在最左边有一个跨度。糟糕的靠不住!!!

我需要一个 css 选项，我可以将它添加到我自己的 css 文件中，与 Bootstrap 和响应式 css 文件分开。我有一个专门针对文本颜色等引用这些跨度的类，因此它不会影响任何其他 <h3>标签

代码:

<div class="hero-unit">
<h1>Opening This Week!</h1>
<div class="row-fluid">
    <div class="span3 mobile-two"><h3>The Incredible Burt Wonderstone</h3><img src="img/ads/incredburtwonderstone-onesht.jpg"></div>
    <div class="span3 mobile-two"><h3>test small</h3><img src="img/ads/incredburtwonderstone-onesht.jpg"></div>
    <div class="span3 mobile-two"><h3>The Incredible Burt Wonderstone</h3><img src="img/ads/incredburtwonderstone-onesht.jpg"></div>
    <div class="span3 mobile-two"><h3>The Incredible Burt Wonderstone</h3><img src="img/ads/incredburtwonderstone-onesht.jpg"></div>
    <div class="span3 mobile-two"><h3>The Incredible Burt Wonderstone</h3><img src="img/ads/incredburtwonderstone-onesht.jpg"></div>
    <div class="span3 mobile-two"><h3>The Incredible Burt Wonderstone</h3><img src="img/ads/incredburtwonderstone-onesht.jpg"></div>
    <div class="span3 mobile-two"><h3>The Incredible Burt Wonderstone</h3><img src="img/ads/incredburtwonderstone-onesht.jpg"></div>
    <div class="span3 mobile-two"><h3>The Incredible Burt Wonderstone</h3><img src="img/ads/incredburtwonderstone-onesht.jpg"></div>
    <div class="span3 mobile-two"><h3>The Incredible Burt Wonderstone</h3><img src="img/ads/incredburtwonderstone-onesht.jpg"></div>
    <div class="span3 mobile-two"><h3>The Incredible Burt Wonderstone</h3><img src="img/ads/incredburtwonderstone-onesht.jpg"></div>
    <div class="span3 mobile-two"><h3>The Incredible Burt Wonderstone</h3><img src="img/ads/incredburtwonderstone-onesht.jpg"></div>
</div>
<p>These movies open this Friday!</p>
<p><a class="btn btn-primary btn-small" href="#coming-soon">See Showtimes &raquo;</a></p></div>

---链接已删除

http://jsfiddle.net/isherwood/GyYMK/1

Answer 1

您可以在 h3 元素上设置一个最小高度，但这是一种相当脆弱的方法，如果页面变得足够窄以至于它们换行的行数超出您的计划，则会中断:

http://jsfiddle.net/isherwood/GyYMK/3/

.mobile-two h3 {
    min-height: 120px;
}

您可能想要编写一些 jQuery 来处理它。