在行中顯示div

有沒有辦法在一行中對齊容器3中的div？在行中顯示div

<div class="container"> 
     <div class="product"></div> 
     <div class="product"></div> 
     <div class="product"></div> 
     <div class="product"></div> 
     <div class="product"></div> 
     <div class="product"></div> 
     <div class="product"></div> 
     <div class="product"></div> 
     <div class="product"></div> 
</div>

來源

2016-11-08 alin dradici

可能重複：http://stackoverflow.com/q/2603700/ 3597276 –

Flexbox，就被前來解決一個。另一個（舊）的方法是使用顯示：（代替浮子）內聯塊

.product { 
 
    display: inline-block; 
 
    width: 30%; 
 
    height: 50px; 
 
    border: 1px solid green; 
 
}

<div class="container"> 
 
     <div class="product"></div> 
 
     <div class="product"></div> 
 
     <div class="product"></div> 
 
     <div class="product"></div> 
 
     <div class="product"></div> 
 
     <div class="product"></div> 
 
     <div class="product"></div> 
 
     <div class="product"></div> 
 
     <div class="product"></div> 
 
</div>

來源

2016-11-08 22:38:58 RizkiDPrast

浮法是一個可怕的選擇。不要使用它。內聯塊也是一個黑客......注意到作者必須使用'30％'，因爲'33％'會因爲它們之間有空格而導致塊每行2個。對於現代瀏覽器，請使用flex。 – JDB

完全同意你的看法。只是試圖給予別人。但是如果想要使用內嵌塊並且想要使用：height = 33.3％的結果相同的結果「我們只需添加」margin-left：-5px;「。內聯塊與」foat「比較的好處是我們不必清楚： – RizkiDPrast

之後是的，這是一個問題，因爲如果我在容器中有超過3個div，一切看起來都很好，但是當我有2個時，它們會重疊 –

是的，flexbox是最好的方式

.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.container .product { 
 
    flex: 1 0 33%; 
 
    height: 50px; 
 
    border: 1px solid black; 
 
}

<div class="container"> 
 
    <div class="product"></div> 
 
    <div class="product"></div> 
 
    <div class="product"></div> 
 
    <div class="product"></div> 
 
    <div class="product"></div> 
 
    <div class="product"></div> 
 
    <div class="product"></div> 
 
    <div class="product"></div> 
 
    <div class="product"></div> 
 
</div>

來源

2016-11-08 22:30:49 LGSon

.container { 
 
    width: 100%; 
 
} 
 
.product { 
 
    width:33.33%; 
 
    background: blue; 
 
    min-height: 100px; 
 
    float:left; 
 
}

<div class="container"> 
 
     <div class="product">1</div> 
 
     <div class="product">2</div> 
 
     <div class="product">3</div> 
 
     <div class="product">4</div> 
 
     <div class="product">5</div> 
 
     <div class="product">6</div> 
 
     <div class="product">7</div> 
 
     <div class="product">8</div> 
 
     <div class="product">9</div> 
 
</div>

來源

2016-11-08 22:31:50 GvM

打敗我吧它的好友。這是未來的方向。 – user1567453

@ user1567453不，不是，浮動並不意味着佈局 – LGSon

唉。浮動。導致各種令人討厭的問題。例如，容器不會根據浮動div的內容大小。 http://stackoverflow.com/questions/2442934/container-div-ignores-height-of-floated-elements – JDB

引導解決方案：

https://jsfiddle.net/e76tknpq/

<div class="row"> 

     <div class="product col-md-4 col-lg-4 col-sm-4 col-xs-4"></div> 
     <div class="product col-md-4 col-lg-4 col-sm-4 col-xs-4"></div> 
     <div class="product col-md-4 col-lg-4 col-sm-4 col-xs-4"></div> 
     </div> 
<div class="row"> 


      <div class="product col-md-4 col-lg-4 col-sm-4 col-xs-4"></div> 
      <div class="product col-md-4 col-lg-4 col-sm-4 col-xs-4"></div> 
      <div class="product col-md-4 col-lg-4 col-sm-4 col-xs-4"></div> 
</div> 
<div class="row"> 


     <div class="product col-md-4 col-lg-4 col-sm-4 col-xs-4"></div> 
     <div class="product col-md-4 col-lg-4 col-sm-4 col-xs-4"></div> 
     <div class="product col-md-4 col-lg-4 col-sm-4 col-xs-4"></div> 

</div>

CSS

.product:nth-child(even){ 
    background: red; 
    height:180px; 
} 

.product:nth-child(odd){ 
    background: green; 
    height:180px; 
}

來源

2016-11-08 22:34:27

在行中顯示div

回答

相關問題