Question

我有这些产品的div

<div class="container">
<div class="product">
                            <div class="image"><img class="img-responsive" src="http://www.shingpoint.com.pk/Images/Thumbnails/pc-a1-470-59100-080316082835.jpg"/></div>
                            <div class="description">
                                <h4 class="productname">ASUS VivoMini PC - UN65H-M030M</h4>
                            </div>
                            <div class="price">
                                <span>Rs. 37,900</span>
                                <input type="button" class="btn btn-primary btn-sm" value="Details"/>
                            </div>
                        </div>
                        <div class="product">
                            <div class="image"><img class="img-responsive" src="http://www.shingpoint.com.pk/Images/Thumbnails/pc-a1-470-59100-080316082835.jpg"/></div>
                            <div class="description">
                                <h4 class="productname">ASUS VivoMini PC - UN65H-M030M</h4>
                            </div>
                            <div class="price">
                                <span>Rs. 37,900</span>
                                <input type="button" class="btn btn-primary btn-sm" value="Details"/>
                            </div>
                        </div>
 </div>

及其CSS

.image{
    display: block;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 100%;
    max-height: 180px;
    height: 60%;
    margin-left: auto;
    margin-right: auto;
    padding-left:.40cm;
}
.description{
    margin: 0 auto;
    max-width: 95%;
}
.productname{
    overflow: hidden;
    display: block;
    margin: 25px 0 0;
    padding: 0;
    line-height: 24px;
}
.price{
    margin-top: 10px;
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: 500;
    color: #E40613;
}

.product{
    height: 320px;
    border: 1px solid #DDDDDD;
    border-bottom: 1px solid #DDDDDD;
    text-align: center;
    padding: 10px 0;
}

现在这些只是两个div，但是当从mysql中获取数据时，它们可以通过foreach循环为10或15

现在这些div水平显示我希望将它们垂直放在带滑块的容器中，如果不是滑块，那么如何才能实现垂直显示？

Answer 1

您必须将display: inline-block添加到产品类中。如果你有很多div，你可能还需要定义宽度。

任何想法如何在bootstrap容器中垂直显示div？

1 个答案: