以下のようなコードの場合、全 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;
}
No.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;
}
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS HTML、cssのatomつぅーやつで 課題Ex1ってやつを表示させたいのですが、 私は課題Ex1が 2 2022/12/15 16:56
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
div要素が重なってします
-
divとpの使いわけ
-
HTML属性での「""」 「''」違い
-
html の divとtable の役割
-
スペースを使わず文字位置を揃...
-
1時間30分を簡単に表したいで...
-
複数のボタンを等間隔に、かつ...
-
body>div{}の意味を知りたい
-
<div id="container">の使いか...
-
<!-- #BeginLibraryItemとは
-
ヘッダーとフッターだけ背景を...
-
html5にて水平線の引き方は?
-
HTMLとCSSはどれだけ分離できる...
-
スライド部分のリンクが貼れな...
-
インラインフレームのページ内...
-
divを横に並べる方法
-
cssにてボタン位置を下揃えしたい
-
min-heightとheightの違いについて
-
サルワカさんの吹き出しのスタ...
-
h1に自分自身へのリンクを張...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
div要素が重なってします
-
HTML属性での「""」 「''」違い
-
複数のボタンを等間隔に、かつ...
-
ヘッダーとフッターだけ背景を...
-
html の divとtable の役割
-
<div id="container">の使いか...
-
divとpの使いわけ
-
min-heightとheightの違いについて
-
HTML5 iframe の代わり
-
divの中に外部のHTMLを埋め込む
-
3カラムレイアウトで「常に残り...
-
ヘッダーを左右に二分割する方...
-
画面を縮小するとカラムが落ち...
-
reuterのScraypingで不思議な現...
-
htmlの見出しタグ(<h1>)の次...
-
1サイト内にHTML5とXHTMLが混在...
-
inline-blockをネストすると表...
-
html5でheaderの中にnav
-
<!-- #BeginLibraryItemとは
おすすめ情報