CSSの位置決めテーブルを隣に配置

以下のHTML/CSSを使用して、私は3つのテーブルを持っています。テーブル1とテーブル2は、テーブル3の下の「同じ行」の隣にありますが、テーブル3とテーブルの間には休憩があります。CSSの位置決めテーブルを隣に配置

しかし、最初の2つのテーブルにfloat：left/rightを使用すると、テーブル3は常にテーブル1/2のすぐ下にあり "touching"していますか？私はマージン/クリア/フロートを試してみましたし、物事はありがたく受け取った:(

任意の助けを並べる作るように見えることはできません

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Untitled Page</title> 
    <style type="text/css"> 
     DIV.search 
     { 
      width: 80%; 
      margin-right: auto; 
      margin-left: auto; 
     } 

     DIV.search TABLE 
     { 
      border: 1px solid black; 
      border-collapse: separate; 
     } 

     DIV.search TABLE.table1 
     { 
      float: left; 
      width: 45%; 
     } 

     DIV.search TABLE.table2 
     { 
      float: right; 
      width: 45%; 
     } 

     TABLE.table3 
     { 
      border: 1px solid black; 
      margin-top: 50px; 
      margin-right: auto; 
      margin-left: auto; 
      width: 80%; 
     } 
    </style> 
</head> 
<body> 
    <div class="search"> 
     <table class="table1"> 
      <tr> 
       <td> 
        TABLE 1 
       </td> 
      </tr> 
     </table> 
     <table class="table2"> 
      <tr> 
       <td> 
        TABLE 2 
       </td> 
      </tr> 
     </table> 
    </div> 
    <table class="table3"> 
     <tr> 
      <td> 
       TABLE 3 
      </td> 
     </tr> 
    </table> 
</body> 
</html>

出典

2011-07-01 BlueChippy

あなたの投稿コードがクロムに私には罰金だ参照してください使用していました。テーブルの間に余裕があります... http://jsfiddle.net/uJtFy/あなたはどのブラウザを使用していますか？ –

あなたの現在の問題は何ですか？私は[jsFiddle]（http://jsfiddle.net/u4sCj/）を作成し、ChromeとIE9では正常に動作します。 – kapa

jsFiddleが表の間に部屋を表示する理由がわからない場合は、ページを作成してChromeで開くと、BlueChippyの説明どおりに表示されます。 – Mark

あなたは、いくつかの追加のスタイル適用する必要があります。

を

DIV.search 
{ 
    width: 80%; 
    margin-right: auto; 
    margin-left: auto; 

    overflow: hidden; /* Fixing the problem in modern browsers */ 
    zoom: 1; /* Fixing in old IE by applying hasLayout */ 
    padding-bottom: 50px; /* I prefer padding here than margin in table3 */ 
} 

TABLE.table3 
{ 
    border: 1px solid black; 
    /* margin-top: 50px; */ 
    margin-right: auto; 
    margin-left: auto; 
    width: 80%; 
}

使用してみることができます：後の回答では、古いIEはサポートしていません。

出典

2011-07-01 14:20:14 Vladimir

素敵なもの...夢のように働く:) – BlueChippy

これはちょっと遅かったのですが、同様の解決方法がCSS "display:inline-block"にあるかもしれませんが、 "display:inline-table"もあります。私のために働いた:)

また、私のために働いて、追加のものが

"float:left"がhere

出典

2013-10-10 08:35:51 user2681625

これは遅れるかもしれませんが、これは素晴らしい答えです！それは、Webkitブラウザに私の正確な問題を保存して、小さなテーブルを単一の行に配置しようとしました。ありがとう！ – Ferdy

CSSの位置決めテーブルを隣に配置

答えて

関連する問題