3

私はあまりにも長い間起きていたに違いありません..単純な CSS の問題で立ち往生していることに気づきました。

Twitter Bootstrap でサイトを構築していて、タイトルをサムネイルの横に浮かせようとしていますが、タイトルが 2 行にまたがって折り返されないようにしています。サムネイル部

このjsFiddleは問題を示しています..誰かが私を悲惨な状況から解放してくれますか?

4

2 に答える 2

6

なぜこれが起こるのか

最初のサムネイルには、.pull_left設定したクラスがありますfloat:left。したがって、サムネイルとキャプションの両方がフローティングされます。キャプションが短いので、幅はサムネイルの左に行くほど小さくなっています。

2 番目のサムネイルにはクラス.pull_leftがなく、フローティングされていません。しかし、あなたの 2 番目のキャプションは、HTML 内でその前にある要素 (2 番目のキャプションを含む) の下で、左に移動するのが自然な動作です。

ソリューション

サムネールを浮かせて、270px(= 350px- 80px)の幅を に追加し.captionます。

デモ

または、サムネイルのみをフロートし、フロートしない場合は、どちらも.pull_left追加する必要はありませんwidth: 270px。オプションでmargin-left: 80pxtoを追加して.caption、非常に長いテキストがサムネイルの下で折り返されないようにすることができます。80pxまたは、サムネイルとキャプションの間に少しスペースを空けるよりも少し大きくても構いません。

Demo //マージン付きのデモ

于 2012-07-23T13:58:11.900 に答える
1

キャプションではなくサムネイルをフロートする必要があります...キャプションのコンテンツが画像を包み込みます...スタンドオフを作成する場合は、キャプションに余白を追加します.

例はこちら。

于 2012-07-23T14:05:23.370 に答える