こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

DIVが二つ続いた後の下にテーブルを表示したいので

添付はエクセルの画像ですが
HTMLでDIVが二つ続いた後の下にテーブルを表示したいのですが

<html>
<head>

<title>test</title>
<style type="text/css">

<!--
div.migi,
div.hidari{
float : left ;
text-align:center;
width:100px;
background-color:
#ffff00;
border:
1px
#BDBDBD
solid;
padding:
10px 6px;
}

div.migi{
float: right;
}
-->

</style>
</head>

<body>

<div class="hidari">
hidari
</div>

<div class="migi">
migi
</div>

<table border=1 cellspacing=0>
<tr><td>1</td><td>2</td></tr>
</table>

</body>
</html>

このコードだとDIVの中にテーブルが入ってしまいます。

理想は添付画像です。
どうすれば良いでしょうか?
よろしくお願いします。

大変申し訳ございませんが、この投稿に添付された画像や動画などは、「BIGLOBEなんでも相談室」ではご覧いただくことができません。 OKWAVEよりご覧ください。

マルチメディア機能とは?

投稿日時 - 2017-09-14 21:31:50

QNo.9374600

暇なときに回答ください

質問者が選んだベストアンサー

もともとのソースを尊重します。以下を追加してください。
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状態に任せます。エクセルでは空きスペースが全くないので、上下0左右autoのショートハンドである、margin:0 auto;を入れました。

floatの挙動は多くの人が誤解するところです。今回は使いませんでしたが、clearfixもフロートを使うには、必須で覚えないといけない考え方となります。勉強してみてください。

投稿日時 - 2017-09-18 07:33:40

お礼

回答ありがとうございました。

投稿日時 - 2017-09-18 23:13:21

ANo.2

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

<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)

なお、このサイトの都合上、上記ソースコードのインデントを全角スペースで表現しています。適宜置換してください。

投稿日時 - 2017-09-14 23:41:10

お礼

回答ありがとうございました。

投稿日時 - 2017-09-18 23:13:28

あなたにオススメの質問