HTML Element Style How to - Align images next to each other and add figcaption to it

Question

We would like to know how to align images next to each other and add figcaption to it.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.mini-img {<!--from  www. jav  a2  s . c o m-->
  width: 100px;
  cursor: pointer;
}

.tab-content {
  margin-top: 10px;
}

div.floatLeft {
  float: left;
}
</style>
</head>
<body>
  <div id="blade" class="tab-content">
    <div class="floatLeft">
      <figure>
        <img src="http://www.java2s.com/style/download.png" class="mini-img" />
        <figcaption class="item_price">$17,000</figcaption>
        <span class="item_name">product</span>
      </figure>
    </div>
    <div class="floatLeft">
      <figure>
        <img src="http://www.java2s.com/style/download.png" class="mini-img" />
        <figcaption class="item_price">$1,682</figcaption>
        <span class="item_name">product</span>
      </figure>
    </div>
  </div>
</body>
</html>

The code above is rendered as follows: