2

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

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

我需要一个 css 选项，我可以将它添加到我自己的 css 文件中，与引导程序和响应 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

4

2 回答 2

1

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

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

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

你可能想写一些 jQuery 来处理它。

于 2013-04-29T17:55:47.703 回答
0

另一种方法可能是将其更多地视为“设计”问题而不是“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/

于 2013-04-29T18:54:55.153 回答