Question

有没有办法将容器3内的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>

Answer 1

是的，flexbox是最好的方法

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

.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>

Answer 3

Bootstrap解决方案：

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;
}

Answer 4

Flexbox来解决这个问题。另一个（旧的）方法是使用 display：inline-block （而不是 float。）

.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>

在行中显示div

4 个答案: