Пример выравнивания div-элементов бок о бок, используя HTML-тег <img>

Source Code: (back to article)

<!DOCTYPE html>  
<html>
  <head>
    <title>Заголовок документа</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> Мы можем создать бок о бок столько div, сколько хотим, с одинаковой высотой, а также с разной высотой. </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>
</html>