0

こんにちは私は自分の写真のボタンにサムネイルを表示しようとしていますが、それは私が持っているスパン全体から外れますここに私のコードがありますここにコード全体がありますhttp://jsfiddle.net/dP4eL/ 私はTwitterのブートストラップを使用しています

<div class="tab-content">
    <div class="tab-pane fade in active" id="home"><div class="container">
        <div class="row">
            <ul class="thumbnails">
                <li class="span4">
                  <div class="thumbnail">
                    <img src="Hydrangeas.jpg" alt="product 1">
                    <div class="caption">
                        <h5>Product detail</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore       magna aliqua.</p>
                        <br>
                        <div class="span1">
                            <div class="thumbnail"><img src="Hydrangeas.jpg" alt="image">
                                <a href="#" class="btn btn-warning">fav</a>
                            </div>
                        </br>
                    </div>
                </p>
            </div>
        </div>
    </li>

ありがとうございました

4

4 に答える 4

0

あなたの質問はちょっと理解するのが難しいです-私はあなたがその小さな「画像/Favbutton」-ボックスをその親-divに残したいと思うと思いますか？！

Bootstrapはfloatを正しい方法で使用する必要があるため、.thumbnail-classに追加してみてください。

.thumbnail { overflow: hidden; }

それがあなたが達成したいことなら。

于 2012-10-02T11:53:20.060 に答える
0

問題は、クラスspanにプロパティがあることfloat: leftです。Floatは、ドキュメントのfloatから要素を削除します。

[class*="span"] {
    float: left;
}

..css宣言にこのcssの複数のインスタンスがあります。私の見方では、2つの選択肢があります。

float: leftすべてのインスタンスから削除するか、 clearfixcssクラスを要素に適用します。これにより、divがドキュメントのフローに残り、親divが拡張されてドキュメントが含まれるようになります。

私はあなたのためにデモを作成しますが、あなたのjs fiddleには非常に多くのcssがあるので、jsfiddleはそれを妥当な速度で解析できません。

于 2012-10-02T06:59:01.330 に答える
0

スパンの float:left 設定を削除します。それが気に入らない場合は、テーブルを使用してみてください:D

于 2012-10-02T07:17:19.257 に答える
0

そこにある限られたコードからはわかりにくいですが、div で余分なコンテンツを切り捨てたい場合は、div の幅と高さを設定し、オーバーフローを非表示に設定できます。

.span1 {
    width: 100px;
    height: 100px;
    overflow:hidden;
}

幅と高さを仕様に変更するだけです。

于 2012-10-01T23:28:12.700 に答える