如何将SPAN定位为与TABLE的任何一侧和上方对齐？

StackOverflow https://stackoverflow.com/questions/228102

  •  03-07-2019
  •  | 
  •  

题 

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

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

示例：

a    b
table0
table1
table2

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

P.S。你可以改变任何内部表格html。

有帮助吗？

解决方案

  

不要相对放置它们，也不放置它们   罗伯艾伦回答说，他们把它们放了   在浏览器的远端不是，   在桌子宽度范围内。

他们将受到容器宽度的限制，Rob的回答使得表格和容器宽度都达到了100％。

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

其他提示

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

我遇到了类似的问题，我找到了解决方案。它不依赖于表的宽度，但它有点棘手。它适用于所有浏览器，包括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;显示：inline-block; 这适用于所有现代浏览器，但不适用于IE7及更低版本。

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

如果您有div而不是span，请尝试float：left表示span a和float：right表示span b 

<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的答案也没有，他们把它们放在浏览器的远端，而不是在桌子宽度范围内。

无论如何我都想不到，除了将表格的宽度设置为某种东西。在我的情况下，我选择100％，它延伸到说唱歌手的宽度为50em：

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

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top