Html 如何将 SPAN 定位到桌子的任一侧和上方？

How can I position a SPAN to be aligned to either side and above a TABLE?

提问by Rob Allen

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

How can I position those spans (they can be changed to any element) so that depending on how big the table is (not defined anywhere, and shouldn't be) the spans are positioned just on top of the left side of the table and the right side of the table.

我如何定位这些跨度（它们可以更改为任何元素），以便根据表格的大小（未在任何地方定义，也不应该定义）跨度位于表格左侧的顶部和桌子的右边。

Example:

例子：

a    b
table0
table1
table2

(where a is the left span, and b is the right span)

（其中a是左跨度，b是右跨度）

P.S. You can change anything bar inner table html.

PS您可以更改任何内容栏内表html。

采纳答案by Matt Mitchell

Doesn't place them relatively, nor does Rob Allen's answer, they put them at the far reaches of the browser not, within the table width.

没有相对放置它们，Rob Allen 的回答也没有，他们将它们放在浏览器的远端，而不是在表格宽度内。

Well they are going to be bound by their container width and Rob's answer makes both the table and container width 100%.

好吧，他们将受到容器宽度的约束，Rob 的回答使表格和容器宽度均为 100%。

The only solution I can think of off hand is to put in a row in your table with a single column (spanning all columns) and in that row have your floated DIVs.

我能想到的唯一解决方案是在您的表格中放置一行，其中包含一列（跨越所有列），并在该行中放置浮动 DIV。

回答by Rob Allen

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

回答by Trix

I ran into similar problem and I have found a solution. It doesn't depend on the width of the table but it is a little trickier. It works in every browser including IE5.5, IE6 and newer.

我遇到了类似的问题，我找到了解决方案。它不取决于桌子的宽度，但它有点棘手。它适用于所有浏览器，包括 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>

If you can't use a float for some reason, than you can use an alternative .tablediv style which I found by a mistake. Just replace the float:left; to display:inline-block;This works in all modern browser but not in IE7 and below.

如果由于某种原因您不能使用浮点数，那么您可以使用我错误发现的替代 .tablediv 样式。只需替换float:left; to display:inline-block;这适用于所有现代浏览器，但不适用于 IE7 及更低版本。

Now you get my point and I'm sure you find any other solutions. Just don't forget that the .tablediv will be as long as the inner content. So placing a paragraph into it will cause to stretch to a bigger size than our table.

现在你明白我的意思了，我相信你会找到任何其他解决方案。只是不要忘记 .tablediv 将与内部内容一样长。因此，将一个段落放入其中会导致拉伸到比我们的表格更大的尺寸。

回答by Ramesh

if you have divs instead of span, try float:left for span a and float:right for span b

如果您有 div 而不是跨度，请尝试使用 float:left 表示跨度 a 和 float:right 表示跨度 b

回答by Ramesh

<div>
<div style="float:left">a</div><div style="float:right">b</div>
<br style="clear: both">
aaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
</div>

Doesn't place them relatively, nor does Rob Allen's answer, they put them at the far reaches of the browser not, within the table width.

没有相对放置它们，Rob Allen 的回答也没有，他们将它们放在浏览器的远端，而不是在表格宽度内。

回答by Ramesh

@MattMitchell, you might have something there. And then just use fload: left and float right I assume?

@MattMitchell，你可能有一些东西。然后只使用 fload: left 和 float right 我假设？

回答by Darryl Hein

I can't think of anyway, except to set the width of the table to something. In my case I choose 100%, which stretches to the width of the rapper at 50em:

反正我想不出，除了将表格的宽度设置为某些东西。在我的例子中，我选择了 100%，它会在 50em 处延伸到 rapper 的宽度：

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