ご覧いただきありがとうございます。
下のサンプルのよう、正方形のdivの中に9つのdivを作りたいのですが、なかなか揃えません。
・欲しいデザイン
・要件
サンプルイメージの1,3,7,9は5emで、5は15emのサイズにしたいと思います。
内部のdivの文字の位置は以下の揃えたいです。
.inner-div1 -> vertical-align: bottom; text-align: right;
.inner-div3 -> vertical-align: bottom; text-align: left;
.inner-div5 -> vertical-align: middle; text-align: center;
.inner-div7 -> vertical-align: top; text-align: right;
.inner-div9 -> vertical-align: top; text-align: left;
.inner-div2, .inner-div4, .inner-div6, .inner-div8は非表示したいです。
・問題点
下のサンプルコードをご覧いただくとご存知ですが、デザインが崩れます。
(センターのフォントのサイズが大きいのが崩れの原因だと思いますが、外側のdivがpixel固定ではなくレスポンシブされるので外側divのサイズが変わったりします。最初のフォントサイズか外側divサイズを指定しないとできなかったりするのでしょうか?デザイン初心者ですので、構造的に問題点がありましたら教えてください。)
サンプルコードは以下のリンクにあります。
リンク内容
→Updateボタンでページ更新されるので、ちょっとしたヒントでも頂いたら助かります。
どうか、よろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー