造型產品

Question

這是我一直在掙扎的東西。 本質上它只是一個包含圖像，鏈接和一些文本的div的樣式。

我試圖名單，與跨度。我使用bootstrap，因此具有堅實的引導樣式基礎的解決方案將有助於提高響應能力。

最左邊的那個人是div看起來是如何被徘徊的。有人可以幫助我，因爲這是我一直想弄清楚的一些事情。

的jsfiddle：http://jsfiddle.net/DTcHh/4143/

<section class="col-md-12">  <!-- MAIN CONTENT --> 

     <ul class="product2_list text-center col-md-12"> 

      <li class="col-md-3 col-sm-6"><a href="#"><img class="img-responsive" src="images/product_image1.jpg" title="Bottoms" /><span><span class="">BOTTOMS</span></span></a><p>PRICE <strong>R100.00</strong></p><a data-toggle="modal" data-target="#stock_level" class="col-md-12 col-sm-12" href="#" title="stock level">STOCK LEVEL</a></li> 


      <div class="modal fade" id="stock_level" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true"> 
<div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button> 
     <h4 class="modal-title" id="myModalLabel">BLOCKER</h4> 
     </div> 
     <div class="modal-body"> 
      <table class="table table-responsive fill table-condensed"> 

      <thead> 
       <tr> 
        <th>CODE</th> 
        <th>COLOUR</th> 
        <th>QUANTITY ON HAND</th> 
        <th>QUANTITY ON ORDER</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td> 
         <p>BLC02</p> 
        </td> 
        <td> 
         <p>BLACK/WHITE/GREY</p> 
        </td> 
        <td> 
         <p>500</p> 
        </td> 
        <td> 
         <p>500</p> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <p>BLC02</p> 
        </td> 
        <td> 
         <p>BLACK/WHITE/GREY</p> 
        </td> 
        <td> 
         <p>500</p> 
        </td> 
        <td> 
         <p>500</p> 
        </td> 
       </tr> 
      </tbody> 
     </table> 
     <table> 
      <tbody> 
       <tr> 
        <td>TOTAL</td 
        ><td>1000</td> 
       </tr> 
      </tbody> 
     </table> 
     </div> 
</div> 


</div> 

</div> 


      <li class="col-md-3 col-sm-6"><a href="#"><img class="img-responsive" src="images/product_image2.jpg" title="Bottoms" /><span><span class="">FORMAL WEAR</span></span></a><p>PRICE <strong>R100.00</strong></p><a class="col-md-12 col-sm-12" href="#" title="stock level">STOCK LEVEL</a></li> 
      <li class="col-md-3 col-sm-6"><a href="#"><img class="img-responsive" src="images/product_image3.jpg" title="Bottoms" /><span><span class="">GOLFERS</span></span></a><p>PRICE <strong>R100.00</strong></p><a class="col-md-12 col-sm-12" href="#" title="stock level">STOCK LEVEL</a></li> 
      <li class="col-md-3 col-sm-6"><a href="#"><img class="img-responsive" src="images/product_image4.jpg" title="Bottoms" /><span><span class="">JACKETS</span></span></a><p>PRICE <strong>R100.00</strong></p><a class="col-md-12 col-sm-12" href="#" title="stock level">STOCK LEVEL</a></li> 
      <li class="col-md-3 col-sm-6"><a href="#"><img class="img-responsive" src="images/product_image5.jpg" title="Bottoms" /><span><span class="">KNITWEAR</span></span></a><p>PRICE <strong>R100.00</strong></p><a class="col-md-12 col-sm-12" href="#" title="stock level">STOCK LEVEL</a></li> 
      <li class="col-md-3 col-sm-6"><a href="#"><img class="img-responsive" src="images/product_image6.jpg" title="Bottoms" /><span><span class="">SHIRTS</span></span></a><p>PRICE <strong>R100.00</strong></p><a class="col-md-12 col-sm-12" href="#" title="stock level">STOCK LEVEL</a></li> 
      <li class="col-md-3 col-sm-6"><a href="#"><img class="img-responsive" src="images/product_image7.jpg" title="Bottoms" /><span><span class="">SWEATERS</span></span></a><p>PRICE <strong>R100.00</strong></p><a class="col-md-12 col-sm-12" href="#" title="stock level">STOCK LEVEL</a></li> 
      <li class="col-md-3 col-sm-6"><a href="#"><img class="img-responsive" src="images/product_image8.jpg" title="Bottoms" /><span><span class="">TRACKSUITS</span></span></a><p>PRICE <strong>R100.00</strong></p><a class="col-md-12 col-sm-12" href="#" title="stock level">STOCK LEVEL</a></li> 
      <li class="col-md-3 col-sm-6"><a href="#"><img class="img-responsive" src="images/product_image9.jpg" title="Bottoms" /><span><span class="">TRACKSUITS</span></span></a><p>PRICE <strong>R100.00</strong></p><a class="col-md-12 col-sm-12" href="#" title="stock level">STOCK LEVEL</a></li> 
      <li class="col-md-3 col-sm-6"><a href="#"><img class="img-responsive" src="images/product_image9.jpg" title="Bottoms" /><span><span class="">TRACKSUITS</span></span></a><p>PRICE <strong>R100.00</strong></p><a class="col-md-12 col-sm-12" href="#" title="stock level">STOCK LEVEL</a></li> 

     </ul> 

    </section>      <!-- END MAIN CONTENT --> 

檢查鏈接的CSS

Answer 1

這取決於你的HTML是如何構造了很多。

有很多方法可以這樣做，無論是使用CSS或JavaScript/jQuery。

你能提供html嗎？會更容易幫助你。