7

私はtwitterブートストラップを使用して、2つのdivを並べて配置しています。各divには、jqueryアイソトープを使用して配置された中規模および大規模の画像が含まれています。問題は、divに十分な画像がない場合、divの幅は同じままであり、余分なスペースがたくさん残っていることです。このような ： ここに画像の説明を入力してください

divを中央に揃え、その中の画像に合わせて幅を狭くしたいと思います。このような： ここに画像の説明を入力してください

私のHTMLコードはこれです：

<div id="container" class="container-fluid">
    <div class="row-fluid">
        <div class="legend span8">Section1</div>
        <div class="legend span4">Section2</div>
    </div>
    <div class="row-fluid">
        <div id="section1" class="span8">
            <div class="small"><img src="images/1.jpg" /></div>
            <div class="small"><img src="images/2.jpg" /></div>
            <div class="big"><img src="images/3.jpg" /></div>
        </div>
        <div id="section2" class="span4">
            <div class="small"><img src="images/1.jpg" /></div>
            <div class="small"><img src="images/2.jpg" /></div>
            <div class="big"><img src="images/3.jpg" /></div>
        </div>
    </div>
</div>

私のCSSは次のようになります：

#section1 .small{
    width:150px;
    height:200px;
    overflow:hidden;
}
#section1 .big{
    width:320px;
    height:420px;
    overflow:hidden;
}
#section2 .small{
    width:80px;
    height:100px;
    overflow:hidden;
}
#section2 .big{
    width:170px;
    height:220px;
    overflow:hidden;
}

他のスタイルはブートストラップです。

4

2 に答える 2

1

私もアイソトープでブートストラップを使用していますが、最初に行うことは、'と'が自分のデザインを尊重していることを確認することです。widthheight

使用するものを変更するだけで、通常は使用することになります

.width2、、、、、、.width3_ .width4_ .width8_ .height2_.height4

次に、containerサイズが正しいことを確認し、同位体に適用します。

その後、すべてのデザインが設定され、サイズに合わせて正しく配置されます。

ちなみに、あなたはこのようなものを持っていることになります：

<div id="container">
    <div class="weather item width2 height8" data-id="1"></div>
    <div class="country item width2 height4" data-id="2"></div>
    <div class="country item width2 height4" data-id="3"></div>
    <div class="country item width2 height4" data-id="4"></div>
    <div class="country item width2 height4" data-id="5"></div>
</div>

各div内では、個人的にJsRenderを使用してテンプレートをレンダリングしますが、それぞれの中にブートストラップレイアウトが必要です。.item

于 2012-12-13T12:55:47.743 に答える
1

私が尋ねたこの質問を完全に忘れました。私は上記の状況を次のように解決しました：

1）メインに等しい左右のマージンを設定しcontainerます。

2）セクション1の同位体を右から左に設定します。私のサイトは実際にはアラビア語のサイトではありませんが、私はほとんど画像を使用しているので問題はありません。

また、すべてのセクションの固定幅の仕様を削除します。コンテナの余白と、ブートストラップの流動的な設計が、中央に最適化された設計を処理します。

于 2013-05-02T10:19:09.547 に答える