- ベストアンサー
HTMLでDIVの下にテーブルを表示する方法
- ＤＩＶが二つ続いた後の下にテーブルを表示する方法を教えてください。
- HTMLのコードでＤＩＶが二つ続いた後の下にテーブルを表示する方法を教えてください。
- DIVの下にテーブルを表示する方法について教えてください。
- WPICVPUJEC
- お礼率76% (260/340)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
もともとのソースを尊重します。以下を追加してください。 table{ clear:both; margin:0 auto; } 両divをfloatされていますが、floatは浮かせて右や左に寄せる働きをします。 浮いていますので、次に来た要素が入りそうなら、入ります。それが、質問の状況です。 そこで、一旦floatを解除するのが、clearです。clearは右だけ、左だけ、両方を値にもてます。今回は、rightもleftも使用しておられるので、両方のbothを使います。clear:both;を入れることで、一旦フラットな状態となります。 あとはtableを真ん中にするだけなので、ブロック要素への中央揃えの指定である。width+margin-left:auto;margin-right:auto;を入れたいところですが、widthが質問文からは不明なので、tableの初期値であるauto状態に任せます。エクセルでは空きスペースが全くないので、上下０左右autoのショートハンドである、margin:0 auto;を入れました。 floatの挙動は多くの人が誤解するところです。今回は使いませんでしたが、clearfixもフロートを使うには、必須で覚えないといけない考え方となります。勉強してみてください。
その他の回答 (1)
- Proof4
- ベストアンサー率78% (151/192)
<html> <head> <title>test</title> <style type="text/css"> .wrap{ display: inline-block; } .boxeswrap{ width: 100%; display: flex; flex-direction: row; justify-content: space-between; } div.migi, div.hidari{ text-align: center; width: 100px; background-color: #ffff00; border: 1px #BDBDBD solid; padding: 10px 6px; } table{ margin: 0 112px; } </style> </head> <body> <div class="wrap"> <div class="boxeswrap"> <div class="hidari"> hidari </div> <div class="migi"> migi </div> </div> <table border=1 cellspacing=0> <tr><td>1</td><td>2</td></tr> </table> </div> </body> </html> CSS3のflexboxを使用しています。(Chrome, Firefox, IE11, Edgeそれぞれ最新バージョンで検証済み) まず全体をwrapで囲み、幅が子要素に合うようにdisplay: inline-blockを指定。 左右のdivはboxeswrapで囲み、幅はwrapの幅いっぱいになるよう指定。boxeswrap内でdivが左右に配置されるようにflexboxを利用しています。 tableには左右にmarginをつけています。marginの値112pxは左右のdivそれぞれの正味の幅です。(width+padding) なお、このサイトの都合上、上記ソースコードのインデントを全角スペースで表現しています。適宜置換してください。
お礼
回答ありがとうございました。
お礼
回答ありがとうございました。