alin dradici alin dradici - 1 month ago 10
CSS Question

Displaying divs in rows

Is there a way to align the divs inside container 3 in a row?

<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

Flexbox is come to solve that one. another (old) approach is to use display: inline-block (instead of 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>