0

Twitter Bootstrapレスポンシブデザインを使用して、非常にシンプルで基本的な画像ギャラリーを作成しようとしています.

画像は動的にレンダリングされます。画像の最初の行は適切に調整されていますが、2 行目からは位置合わせが異なります。

これが私のコードです

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gallery</title> 
<link href="<?=base_url()?>assets/css/bootstrap.css" rel="stylesheet"> 
<link href="<?=base_url()?>assets/css/bootstrap-responsive.css" rel="stylesheet">
<style>

</style>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
    <div class = "span12">
    <?php
    for($i=0; $i<10 ;$i++)
    {
    ?>              
    <div class = "span3">
    <a href="#" class="thumbnail">
            <img src="https://www.gstatic.com/webp/gallery/4.sm.jpg" alt="sample" style = "border:solid 2px red;"/>
    </a>
    </div>

    <?php
    }
    ?>
    </div>                  
</div>
</div>


</body>
</html>

構造のような完璧なギャラリーのように見えるように、スパンを正確に揃えるにはどうすればよいですか。

ここでプラグインやjQueryを使用したくありません。

4

2 に答える 2

1

<div class="row-fluid"> ... </div>4 つの画像ごとに新しい画像を追加しようとしましたか?

于 2013-07-25T13:39:40.150 に答える