在行中显示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

回答

相关问题