3 
<div>
<span>left</span>
<span>right</span>
<!-- new line break, so no more content on that line -->
<table> 
...
</table>
</div>

テーブルの大きさに応じて（どこにも定義されておらず、定義されるべきではない）スパンがテーブルの左側のすぐ上に配置されるように、これらのスパンを配置するにはどうすればよいですか（任意の要素に変更できます）。テーブルの右側。

例：

ab
table0
表1
表2

（ここで、aは左スパン、bは右スパンです）

PSバーの内部テーブルのhtmlは何でも変更できます。

4

7 に答える 7

5 
<style type="text/css">
    #wrapper, #top, #tableArea
     {
       width: 100%;
       padding: 10px;
       margin: 0px auto;
      }

     #top
      {
        padding: 0px;
      }

      #leftBox, #rightBox
      {
          margin: 0px;
          float: left;
          display: inline;
          clear: none;
       }

       #rightBox
        {
            float: right;
        }
     </style>
<div id="wrapper">
    <div id="top">
        <div id="leftBox">A</div>
        <div id="rightBox">b<</div>
    </div>
    <div id="tableArea">
        <table> ... </table>
    </div>
</div>
于 2008-10-23T01:02:32.640 に答える
2

それらを相対的に配置したり、Rob Allenの答えをしたりしません。テーブル幅内ではなく、ブラウザーの遠方に配置します。

まあ、彼らはコンテナの幅に拘束されるでしょう.Robの答えは、テーブルとコンテナの幅の両方を100％にします.

私が考えることができる唯一の解決策は、テーブルに単一の列 (すべての列にまたがる) を持つ行を配置し、その行にフローティング DIV を配置することです。

于 2008-10-23T01:09:47.180 に答える
2

私は同様の問題に遭遇し、解決策を見つけました。テーブルの幅には依存しませんが、少しトリッキーです。IE5.5、IE6 以降を含むすべてのブラウザで動作します。

  <style>
  .tablediv {
  float:left; /* this is a must otherwise the div will take a full width of our page and this way it wraps only our content (so only the table)   */
  position:relative; /* we are setting this to start the trickie part */  
  padding-top:2.7em; /* we have to set the room for our spans, 2.7em is enough for two rows otherwise try to use something else; for one row e.g. 1.7em */
  }
  .leftspan {
  position:absolute; /* seting this to our spans will start our behaviour */
  top:0; /* we are setting the position where it will be placed inside the .tablediv */
  left:0;
  }
  .rightspan {
  position:absolute; 
  top:0; 
  right:0; 
  }
  </style>
<div class="tablediv">
 <span class="leftspan">Left text</span>
 <span class="rightspan">Right text <br /> with row</span>
  <table border="1">
   <tr><td colspan="3">Header</td></tr>
   <tr><td rowspan="2">Left content</td><td>Content</td><td rowspan="2">Right content</td></tr>
   <tr><td>Bottom content</td></tr>
  </table>
</div>
 <!-- If you don't want to float this on the right side of the table than you must use the clear style -->
 <p style="clear:both">
  something that continues under our tablediv
 </p>

何らかの理由でフロートを使用できない場合は、私が間違って見つけた別の .tablediv スタイルを使用できます。float:left; to display:inline-block;これは最新のすべてのブラウザーで機能しますが、IE7 以下では機能しません。

今、あなたは私の主張を理解しています。他の解決策が見つかると確信しています。.tablediv が内部コンテンツと同じ長さになることを忘れないでください。そのため、段落を配置すると、表よりも大きなサイズに引き伸ばされます。

于 2011-12-30T14:17:29.433 に答える
1

スパンの代わりに div がある場合は、スパン a に float:left を、スパン b に float:right を試してください。

于 2008-10-23T01:01:23.440 に答える
0 
<div>
<div style="float:left">a</div><div style="float:right">b</div>
<br style="clear: both">
aaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
</div>

それらを相対的に配置したり、Rob Allenの答えをしたりしません。テーブル幅内ではなく、ブラウザーの遠方に配置します。

于 2008-10-23T01:05:57.877 に答える
0

@MattMitchell、そこに何かがあるかもしれません。そして、 fload: left と float right を使用すると思いますか?

于 2008-10-23T01:11:00.267 に答える
0

テーブルの幅を何かに設定することを除いて、とにかく考えられません。私の場合、50em でラッパーの幅に伸びる 100% を選択します。

<style type="text/css">
#wrapper {
    width: 1%;
    min-width:50em;
    padding: 10px;
}
#mainTable {
    width:100%;
}

#leftBox {
    float: left;
}

#rightBox {
    float: right;
}
</style>
<div id="wrapper">
    <div id="leftBox">A</div>
    <div id="rightBox">b</div>
    <br style="clear: both" />
    some text some text some text some text some text <br />
    some text some text some text some text some text <br />
    some text some text some text some text some text
    <table id="mainTable" border="1"><tr><td>test</td><td>test 2</td></tr></table>
</div>
于 2008-10-23T03:06:47.867 に答える