写真つき文章のHTMLとCSS

写真つき文章 【j-textWithImage】

<div id="cc-m-XXXXXXXXXX" class="n j-textWithImage ">
■写真つき文章のクラス名
 j-textWithImage

 

<figure class="cc-imagewrapper cc-m-image-align-1">

■figureのクラス名 ※写真の時と同じ?

 cc-imagewrapper
 cc-m-image-align-1

<img src="URL" alt="" class="" data-src-width="640" data-src-height="480"/>

※クラス名は指定できないので、写真つき文章のクラス名が必要。
※個別指定なら、画像についているID(ここでは簡略化で表示していない)を使用する。


</figure>

<div>

<div data-name="text" data-action="text" class="cc-m-textwithimage-inline-rte">
■文章枠のクラス名
 cc-m-textwithimage-inline-rte

<p>写真つき文章</p></div>

</div>

html * div.n {

    height: 1%;

}

div.n, div.flexmodul {

    padding: 5px;

}

.j-textWithImage .cc-imagewrapper {

    width: auto;

}

.cc-m-textwithimage .cc-m-image-align-1, .cc-m-textwithimage .imgleft, .j-textWithImage .cc-m-image-align-1, .j-textWithImage .imgleft {

    display: inline;

    float: left;

    margin: 4px 20px 4px 0;

}

.j-textWithImage figure {

    z-index: 1;

}

.cc-imagewrapper {

    position: relative;

}

.cc-imagewrapper {

    position: relative;

}

.cc-m-image-align-1, .cc-m-image-align-1 img {

    float: left;

}

.cc-imagewrapper {

    display: block;

    height: auto !important;

    margin: 0;

    width: 100%;

}

.cc-imagewrapper, .cc-imagewrapper img, .cc-shop-product-img-confines img, select.cc-product-variant-selectbox {

    max-width: 100%;

}

article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {

    display: block;

}

.cc-imagewrapper img {

    display: block;

    left: 0;

    top: 0;

}

img {

    display: block;

}

a img, img {

    border: 0 none;

}

株式会社 PIK

〒108-0075 港区港南3-4-12

TEL.03-6433-0422