display: table;で、ツーカラムで二列という形で、4つの画像を表記したいと思っています。
画像が四つ同じ親要素の中に並んでいる場合は、二つずつdivを使って別の親要素を作ってそのdivに、
display: table;を適応されるのが正しいのでしょうか?
できれば無駄なdivは作りたくないのですが、致し方ないでしょうか?
また画像と同じ親要素の中にh、pタグなどもある場合は、その親にdisplay: table;をつけると、こちらまでテーブルの一部になってしまわないでしょうか?
その場合の対処法があれば教えてください。
・ソース
<section class="main__about-me"> <h2 class="content-wrap-widthmax__heading main__common-heading">GALLARY</h2> <h3>題名</h3> <p>和風の高級感を表現するをコンセプトに作ったサンプルサイトです。</p> <figure class="portfolio-images-common"> <img class="aa-pcimage" src="img/index/aa-pcimage.jpg" alt="PCサイズの画像"> <figcaption>PCサイズ</figcaption> </figure> <figure class="portfolio-images-common"> <img class="aa-tabletimage" src="img/index/aa-tabletimage.png" alt="タブレットサイズサイズのファーストビューの画像"> <figcaption>タブレットサイズ</figcaption> </figure> <figure class="portfolio-images-common"> <img class="aa-sptimage" src="img/index/aa-tabletimage.png" alt="SPサイズサイズのファーストビューの画像"> <figcaption>SPサイズ</figcaption> </figure> <figure class="portfolio-images-common"> <img class="aa-sptimage" src="img/index/aa-tabletimage.png" alt="SPサイズサイズのファーストビューの画像"> <figcaption>SPサイズ</figcaption> </figure> </section><!-- /#about -->
もしかすると下記のように、マルチカラムにしたい画像を同じfigureタグの中に入れて、別カラムにしたい、画像は別のfigureタグに入れて、、それぞれのfugureタグにdisplay: table-cell;を入れるのが、実務でも正しいやり方なのでしょうか?
↓
・ソース
<section class="main__about-me"> <h2 class="content-wrap-widthmax__heading main__common-heading">GALLARY</h2> <h3>題名</h3> <p>和風の高級感を表現するをコンセプトに作ったサンプルサイトです。</p> <figure class="portfolio-images-common"> <img class="aa-pcimage" src="img/index/aa-pcimage.jpg" alt="PCサイズの画像"> <figcaption>PCサイズ</figcaption> <img class="aa-tabletimage" src="img/index/aa-tabletimage.png" alt="タブレットサイズサイズのファーストビューの画像"> <figcaption>タブレットサイズ</figcaption> </figure> <figure class="portfolio-images-common"> <img class="aa-sptimage" src="img/index/aa-tabletimage.png" alt="SPサイズサイズのファーストビューの画像"> <figcaption>SPサイズ</figcaption> <img class="aa-sptimage" src="img/index/aa-tabletimage.png" alt="SPサイズサイズのファーストビューの画像"> <figcaption>SPサイズ</figcaption> </figure> </section><!-- /#about -->
上記のようにしたいのですが、プロのコーダーは、この場合フロートを使うのでしょうか?
マルチカラムはIE8以上なら、すべてdisplay:table;が良いのかと思っていましたが、
そうではないのですかね?
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2015/12/14 16:11
退会済みユーザー
2015/12/16 11:11
2015/12/16 16:10
退会済みユーザー
2015/12/17 15:40