figure {
    float: left;             /* 左に寄せて後続を右に回り込ませる */
    margin: 0px 1% 7px 0px; /* 外側に余白を加える(右に7px・下に7px) */
    background-color: #ccc;  /* 背景色 */
    width:24%;
}
figure img {
    display: block;          /* 余計な余白が出ないようにする */
    margin: 0px 0px 5px 0px; /* 下側にだけ3pxの余白を追加 */
        width:100%;

}
figcaption {
    font-size: 0.9em;        /* 文字サイズを90%に */
    text-align: center;      /* 中身をセンタリング */
    height:50px;
}
div.imagearea:after {
    content: "";      /* ※Clearfix */
    clear: both;
    display: block;
}