Question

我在twitter bootstrap中连续几行。这些范围内有<h3>个标题，然后是<img>，<p>等。其中一些标题可能只有一个或两个字。有些可能有5或6个单词会导致更高的高度。这使得剩余内容在页面上看起来很糟糕，因为图像比其他图像更高或更低。如何根据最大标头中的内容量使所有标头标签保持相同的高度？或者我如何使较大标题中的内容缩小到一个大小以保持相同的高度？我不认为这最后的方法真的是我需要的。较小的文字可能看起来像最初的问题一样糟糕。

这导致的另一个问题是由于可能在任何时间显示的内容量，我可能有比行调用更多的跨度。 IE：6 span4's。这使得最后两个下拉并在行内开始自己的“行”。这很好并且需要，但是如果第二个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来处理它。

Answer 2

另一种方法可能是将此视为“设计”问题而非“css”问题。您可以利用使用此布局创建的不对称性。一个很好的例子是Pinterest。他们有类似的挑战（不是文本），但有人们上传的图像的高度。您可以通过将'span3'div声明为电影海报的持有者来在垂直列中分发内容来做类似的事情：

<div class="span3 mobile-two movies-column">
    <div class="movie-tn">
        <h3>The Incredible Burt Wonderstone</h3>
        <img src="http://placehold.it/250x100" />
    </div>
    <!--more movie poster holders-->
</div>

这是一个相同的JSFiddle：http://jsfiddle.net/R5qJ9/

您需要进行一些计算才能在列中分发电影海报。但是你必须做一些计算来设定统一的高度。

一点点改进就是重新排列图像和标题，并添加一些与电影相关的内容，以便稍微展开设计元素：

这是一个JSFiddle：http://jsfiddle.net/yQp6h/

无论内容如何，我如何保持所有h3标题的高度相同？

2 个答案:

无论内容如何，​​我如何保持所有h3标题的高度相同？

2 个答案:

无论内容如何，我如何保持所有h3标题的高度相同？