任何想法如何在引導程序容器中垂直顯示div？

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但它們可以通過foreach循環10或15時的數據是從MySQL

牽強

現在這些div水平顯示我想要讓它們垂直放置在一個帶有滑塊的容器中，如果不是滑塊可能的話那麼垂直顯示又該如何實現？

Answer 1

您必須將display: inline-block添加到產品分類中。如果您有多個div，您可能還需要定義寬度。