div对齐问题在基于表格的布局

我需要对遗留的基于web的cms（它具有基于表格的布局）进行一些更改。我只能对网站的内容区域进行更改，它位于几个复杂的嵌套表格内，但我想我们可以假设这里只有一个表格。div对齐问题在基于表格的布局

鉴于下面的（简化）代码，是否可以在IE6和IE7的最右侧显示ABC？

<table> 
    <tr> 
    <td style="width:200px; border:solid 1px black;"> 
     <!-- can only make changes inside here --> 
     <div style="border:solid 1px red; text-align:right;">ABC</div> 
     <input style="width:300px;" value="DEF"> 
    </td> 
    </tr> 
</table>

<input>标记表示某些内容可能比表格单元格的预设宽度更长。在IE8或其他现代浏览器中，div可以扩展以匹配输入。但在IE6和IE7中，我似乎无法使用CSS来扩展超过200像素。我试过使用浮点，宽度，相对位置等。再一次，我不能删除200px宽度的声明或对表结构进行任何其他更改。

任何人都知道如何做到这一点？谢谢。

来源

2011-08-17 ananda

您是否尝试过使用负右边距并将其右移？我不确定这是你需要的还是IE6和IE7会用它做的：http://jsfiddle.net/ambiguous/AfW4B/ –

你可以尝试类似margin-left：170px（或者任何px值是必要的），看看是否会把abc移到右边 – RSM

谢谢。我想我没有明确说明内容可以具有动态宽度，因此使用固定的边距不起作用。 – ananda

如果你可以改变细胞内的结构，你可以用在div有float:left（或right，或者是inline-block）的一切，所以它会扩展到的内容是这样的：http://jsfiddle.net/kizu/AkVqS/

如果您不能包装input部分，您可以使用只运行一次的表达式（所以它不会导致任何性能问题）：http://jsfiddle.net/AkVqS/2/

来源

2011-08-17 09:46:15 kizu

使用表达完美，谢谢。 – ananda

div对齐问题在基于表格的布局

回答

相关问题