Question

这是我已经挣扎了一段时间的事情。基本上它只是一个div的样式，包含图像，链接和一些文本。

enter image description here

我已经尝试过使用跨度的列表。我使用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吗？会更容易帮助你。

造型产品

1 个答案: