1

画像ギャラリーの親指を作成します。ページには 5 ～ 15 個の親指がある場合があります。

私のマークアップはこれです：

<div class="container>
    <div class="row-fluid">
        <h4 class="underline"><span>Recent images</span></h4>

        <div id="portfolio" class="row-fluid">
           <div class="span3">
                <img src="img/portfolio/1.jpg">
           </div>
           <div class="span3">
                <img src="img/portfolio/2.jpg">
           </div>     
           <div class="span3">
                <img src="img/portfolio/3.jpg">
           </div>     
           <div class="span3">
                <img src="img/portfolio/4.jpg">
           </div>     
           <div class="span3">
                <img src="img/portfolio/5.jpg">
           </div>     
           <div class="span3">
                <img src="img/portfolio/6.jpg">
           </div>     
           <div class="span3">
                <img src="img/portfolio/7.jpg">
           </div>     
           ...
       </div>
    </div>
</div>

親指の位置がずれている

margin-leftブートストラップはから を削除するだけなので、これは機能しませんfirst-child。

知っている！span3 の 4 つの要素を a に配置する必要があるrowだけですが、問題は、親指が PHP スクリプトから来ており、親指が 4 つ以上ある状況をどのように処理できますか?

4 つの要素ごとに繰り返して、別の行流体コンテナーを作成する必要がありますか?

私は混乱しています。

4

2 に答える 2

2

はい、PHP コードは、12 の「スパン」ごとに 1 つの行を閉じ、新しい行を開始する HTML になる必要があります。

<div class="container>
    <div class="row-fluid">
        <h4 class="underline"><span>Recent images</span></h4>

        <div id="portfolio">
          <div class="row-fluid">
             <div class="span3">
                  <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQSlkfizo8Zj0MGNAt2p9g4JFnjOT4017-sR0Cjodujh5Yqb8JJ">
             </div>
             <div class="span3">
                  <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQSlkfizo8Zj0MGNAt2p9g4JFnjOT4017-sR0Cjodujh5Yqb8JJ">
             </div>     
             <div class="span3">
                  <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQSlkfizo8Zj0MGNAt2p9g4JFnjOT4017-sR0Cjodujh5Yqb8JJ">
             </div>     
             <div class="span3">
                  <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQSlkfizo8Zj0MGNAt2p9g4JFnjOT4017-sR0Cjodujh5Yqb8JJ">
             </div>    
          </div>
          <div class="row-fluid"> 
             <div class="span3">
                  <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQSlkfizo8Zj0MGNAt2p9g4JFnjOT4017-sR0Cjodujh5Yqb8JJ">
             </div>     
             <div class="span3">
                  <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQSlkfizo8Zj0MGNAt2p9g4JFnjOT4017-sR0Cjodujh5Yqb8JJ">
             </div>     
             <div class="span3">
                  <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQSlkfizo8Zj0MGNAt2p9g4JFnjOT4017-sR0Cjodujh5Yqb8JJ">
             </div>
          </div>
       </div>
    </div>
</div>

あなたのコードと私のコードを並べて比較するには、http://jsfiddle.net/jhfrench/sSAx2/を参照してください。また、andも<div id="portfolio" class="row-fluid">分割していることに気付くと思います。これは、1 つまたは複数の画像行のコンテナーになります。<div id="portfolio"><div class="row-fluid">#portfolio

于 2013-01-08T19:04:43.490 に答える