Display Inline-block

by Raúl Rojas

HTML

<div class="padre">
  <div class="uno">
    <p>UNO</p>
  </div>
  <div class="medio">
    <p>7</p>
  </div>
  <div class="dos">
    <p>DOS</p>
  </div>
</div>

<!--COOL-->

CSS

.padre {
  background: #ccc;
  width: 600px;
  height: 300px;
  text-align: justify;
}

.padre:after {
  content: '';
  display: inline-block;
  width: 100%;
  height: 0;
  font-size: 0;
  line-height: 0;
}

.uno {
  background: red;
  width: 200px;
  height: 200px;
  display: inline-block;
}

.dos {
  background: blue;
  width: 200px;
  height: 200px;
  display: inline-block;
}

.medio {
  background: greenyellow;
  width: 100px;
  height: 100px;
  display: inline-block;
}