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 个元素放入 arow但问题是如何处理拇指来自 PHP 脚本且拇指超过 4 个的情况？

我是否应该为每 4 个元素重新迭代，并制作另一个行流体容器？

我很困惑。

4

2 回答 2

2

是的，您的 PHP 代码需要生成关闭一行并开始新行的 HTML，每 12 个“跨度”：

<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/ 。你会注意到我也把你的<div id="portfolio" class="row-fluid">分成了<div id="portfolio">，<div class="row-fluid">所以这#portfolio将是一个或多行图像的容器。

于 2013-01-08T19:04:43.490 回答
0

对我来说，在同一个 div 中使用 span3 类的图像是有效的。
最近的图像

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

</div>
</div>
</div>
</div>
于 2014-02-19T19:45:25.360 回答