◎店舗のご紹介

by KURO KUMO

HTML

<link rel="stylesheet" href="http://yui.yahooapis.com/3.5.0/build/cssreset/cssreset-min.css">
<div class="info_box clearfix">
<a>
<img class="image_left" alt="画像" src="http://dummyimage.com/200/000/fff.jpg">
</a>

    <div class="text_right">
        <p>あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</p>
    </div>
</div>
<div class="info_box clearfix">
<a>
<img class="image_right" alt="画像" src="http://dummyimage.com/200/000/fff.jpg">
</a>

    <div class="text_left">
        <p>あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</p>
    </div>
</div>
<div class="info_box clearfix">
    <div class="text_only">
        <p>あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</p>
    </div>
</div>

CSS

.clearfix:after {
    clear: both;
    content:".";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix {
    display: block;
}
.clearfix {
    display: inline-block;
    min-height: 1%;
}
.info_box {
    background: none repeat scroll 0 0 #F9F0E1;
    border: 5px solid #BCB08E;
    margin-bottom: 10px;
    padding: 5px 10px;
}
/*画像左文字右*/
 .info_box .image_left {
    float: left;
    width: 200px;
    padding: 0 10px 0 0;
}
.info_box .text_right {
    float: right;
    text-align: left;
    width: 455px;
}
/*画像右文字左*/
 .info_box .image_right {
    float: right;
    width: 200px;
}
.info_box .text_left {
    float: left;
    text-align: left;
    width: 455px;
}
.info_box .text_only {
    text-align: left;
    width: 655px;
}