2

Twitter ブートストラップの行内に複数のスパンがあります。これらのスパン内には<h3>ヘッダーがあり、次に<img>、<p>などがあります。これらのヘッダーの一部は、1 つまたは 2 つの単語しかない場合があります。身長が高くなる5または6語を含むものもあります。これにより、画像が残りの部分よりも高くまたは低くなるため、残りのコンテンツがページ上で不安定に見えます。最大のヘッダーのコンテンツの量に基づいて、すべてのヘッダー タグを同じ高さに保つにはどうすればよいですか? または、大きなヘッダーのコンテンツを同じ高さを維持するサイズに縮小するにはどうすればよいですか? この最後のアプローチが本当に必要なものだとは思いません。小さいテキストは、おそらく最初の問題と同じくらい不安定に見えるでしょう。

これが引き起こす別の問題は、いつでも表示される可能性のあるコンテンツの量が原因であり、行が要求するよりも多くのスパンがある可能性があります。IE: 6 つの span4。これにより、最後の 2 つのドロップダウンが作成され、行内で独自の「行」が開始されます。それは問題なく必要ですが、2番目のスパン4が他のスパンよりも低くなると、そのスパンをすり抜けることができないため、下の2つのスパンが右に押し出されます。3 番目のスパンが低い場合は、右端に 1 つのスパンがあり、左端に 1 つのスパンがある 3 番目の行になります。悪い！

ブートストラップおよびレスポンシブ 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 要素に min-height を設定することもできますが、それはかなり壊れやすいアプローチであり、ページが狭くなり、計画よりも多くの行に折り返されると壊れます。

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

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

それを処理するために jQuery を書きたいと思うかもしれません。

于 2013-04-29T17:55:47.703 に答える
0

別のアプローチは、これを「css」の問題ではなく「設計」の問題と見なすことです。おそらく、このレイアウトで作成される非対称性を利用できます。ピンタレストが良い例です。彼らは（テキストではなく）同様の課題を抱えていますが、人々がアップロードする画像の高さについてです. '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 に答える