1

Twitter Bootstrap を使用して PHP Web サイトを作成していますが、修正できない奇妙な動作に遭遇しました。ループを使用して画像ボックスを作成します (下にスクリーンショットがあります) が、何らかの理由でループが非常に奇妙な位置合わせの問題を引き起こします (垂直の列に配置しようとしています)。すべてのコードは以下です。誰かが私を助けたり、正しい方向に向けたりすることができれば、それは素晴らしいことです.

 foreach ($media->data as $data) {
        $x = $instagram->likeMedia($data->id);
        $usr = $data->caption->from->username;
        echo "<div class=\"span2\">";
        echo "<span style=\"text-align: center;\">";
        echo "<a href=\"{$data->link}\" target=\"_blank\">";
        echo "<div class=\"well\">";
        echo "<img src=\"{$data->images->thumbnail->url}\" alt=\"Loading...\">";
        echo "</a><br /><br /><a rel=\"tooltip\" title=\"Visit {$usr}'s Profile\" class=\"btn btn-primary btn-small\" href=\"http://instagram.com/{$usr}\">View Profile</a><br /></span>";
        echo "</div></div>";
        }

ブラウザー ウィンドウの HTML コード: http://snippi.com/s/dagwl09

ブラウザでの奇妙な動作のスクリーンショット:

4

2 に答える 2

2

Jsfiddle :画像付きデモ

問題は、単一の行を作成し、その中にすべてのスパン列を実装したことです。グリッドは 12 列しか使用できず、18 列を挿入したため、そのように整列しません。また、他のユーザーから、終了タグが間違った方法で閉じられていることが正しく言及されています。

行の列は次のようになります。

 <div class="span2">
<span style="text-align: center;"><a href="http://instagr.am/p/WQok38nelp/" target="_blank">
    <div class="well">
        <img src="http://distilleryimage1.s3.amazonaws.com/8b0f6290815811e2b55e22000a9f09fb_5.jpg" alt="Loading..."></a><br /><br /><a rel="tooltip" title="Visit youtayloratsix's Profile" class="btn btn-primary btn-small" href="http://instagram.com/youtayloratsix">View Profile</a><br/>
    </div>
 </span>
 </div>

次の方法で画像を配置できます

<div class="row-fluid">
   <div class="span2"></div>
   <div class="span2"></div>
   <div class="span2"></div>
   <div class="span2"></div>
   <div class="span2"></div>
   <div class="span2"></div>
 </div>
 <div class="row-fluid">
   <div class="span2"></div>
   <div class="span2"></div>
   <div class="span2"></div>
   <div class="span2"></div>
   <div class="span2"></div>
   <div class="span2"></div>

イメージを span2 に配置すると、すべてが意図したとおりに機能するはずです。

于 2013-02-28T09:15:57.133 に答える
0

div と spans を間違った順序で開いたり閉じたりしているように見えますが、問題になる可能性があります。その少なくとも無効なhtml。

あなたはそれらを順番<div>,<span>,<div>に開いていますが、閉じてい</span>,</div>,</div>ます。

于 2013-02-28T09:06:08.623 に答える