[PR]ネットとスマホ OCNでまとめておトク!

以下のようなコードの場合、全 2 行になり、
1 行目は 3 列で、各 およそ 33%
2 行 2 列で、各 50%

1,2 行目がずれてしまいます。ずれないように均等幅で並べるにはどのようにすればよいでしょうか ?
通常のテーブルのようにしたいのですが、
分かる方おりましたら、ご教授下さい。

宜しくお願い致します。

( HTML )
<div class="box">
<div class="pane">A</div>
<div class="pane">B</div>
<div class="pane">C</div>
</div>

<div class="box">
<div class="pane">D</div>
<div class="pane">E</div>
</div>


( CSS )
display: table;
width: 100%;
table-layout: fixed;
}
.pane {
display: table-cell;
border: solid 1px #333333;
}

A 回答 (1件)

HTML


<div class="box">
<div class="row">
<div class="pane">A</div>
<div class="pane">B</div>
<div class="pane">C</div>
</div>

<div class="row">
<div class="pane">D</div>
<div class="pane">E</div>
</div>
</div>

CSS
.box {
display: table;
width: 100%;
table-layout: fixed;
}
.pane {
display: table-cell;
border: solid 1px #333333;
}
.row {
display: table-row;
}
    • good
    • 0
この回答へのお礼

display: table-row; の使い方勉強になりました。
ご回答頂き、大変ありがとうございました。

お礼日時:2019/07/07 23:16

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング