Un Exemple de Comment Aligner les Divs l'un à Côté de l'Autre

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .container {
        width: 600px;
        height: 190px;
        background-color: #5cbbf2;
        padding: 35px 15px 5px;
      }
      .container:before,
      .container:after {
        content: "";
        display: table;
        clear: both;
      }
      .container div {
        float: left;
        width: 180px;
        height: 160px;
      }
      #box2 {
        background-color: #000000;
        margin-left: 30px;
        margin-right: 30px;
      }
      p {
        color: white;
        padding: 5px 10px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h2>W3docs</h2>
    <div class="container">
      <div id="box1">
        <img src="https://pp.userapi.com/c622225/v622225117/10f33/47AAEI48pJU.jpg?ava=1" style="width: 180px; height: 160px;" />
      </div>
      <div id="box2">
        <p>Nous pouvons créer autant de div que nous le souhaitons côte à côte avec la même hauteur et avec différentes hauteurs.</p>
      </div>
      <div id="box3">
        <img src="https://pp.userapi.com/c622225/v622225117/10f33/47AAEI48pJU.jpg?ava=1" style="width: 180px; height: 160px;" />
      </div>
    </div>
  </body>
</html>