![](/img/trans.png)
[英]How can I position elements within a table cell (td) such that one element is left aligned and the other right aligned?
[英]How can I position a SPAN to be aligned to either side and above a TABLE?
<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是右跨度)
PS你可以改变任何内部表格html。
<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>
不是把它们放在相对的位置,也不是Rob Allen的答案,他们把它们放在浏览器的远端,而不是在桌子宽度范围内。
好吧,他们将受到他们的容器宽度的限制,Rob的回答使得桌子和容器的宽度都达到了100%。
我能想到的唯一解决方案就是在表格中添加一行(跨越所有列)并在该行中放置浮动的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; to display:inline-block;
float:left; to display: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的答案,他们把它们放在浏览器的远端,而不是在桌子宽度范围内。
@MattMitchell,你可能会有一些东西。 然后只使用fload:left和float我假设?
无论如何我都想不到,除了将表的宽度设置为某个东西。 在我的情况下,我选择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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.