右下角类在firefox中不起作用为什么？

Question

我一直在努力调整这两天，但无法修复它。 请帮帮我。 我有这个css。 它在Chrome，IE和Opera中正常运行，但不适用于Firefox。 这是链接： http ： //jsfiddle.net/6p5vp/6/

这是我使用的类，它在除Firefox之外的其他浏览器中正常工作：

.main1 .row td
 {
    border-bottom: 1px dotted silver;
    vertical-align:top;
    padding:10px;
    margin-bottom:20px;
    margin-top:20px;
   position:relative;

 }

 .main1 .row td .tick
 {
    bottom:0;
    right:0;
   text-align:right;
   position:absolute;
 }​

这是标记：

<table class="main1">
<tr class="row">
<td>
  <div>     
  <div>
    All the text comes here  All the text comes here  All the text comes here  All the text comes here 
 All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here 
       All the text comes here  All the text comes here  All the text comes here  All the text comes here 
 All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here 
       All the text comes here  All the text comes here  All the text comes here  All the text comes here 
 All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here  All the text comes here 
  </div>
</div>
</td>
<td>
<div>
  <div>
    All the text comes here  All the text comes here  All the text comes here  All the text comes here 

  </div>
  <div class="tick">
      <input type="checkbox"/>
  </div>
</div>
</td>
</tr>
</table>​

我想要的是根据第一列的高度在第二列的右下角显示一个复选框。 就像是：

textincolumn1 textincolumn2

textincolumn1

textincolumn1
textincolumn1
textincolumn1复选框在这里

请帮我纠正一下。 非常感谢你。

Answer 1

为什么不使用无表格方法？

也许是这样的： http ： //jsfiddle.net/6E7vS/

HTML：

<div class="main">

    <div class="right">
        Lorem ipsum ...
    </div>

    <div class="left">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr...
    </div>

    <div class="checkbox">
        <input type="checkbox">
    </div>

</div>​

CSS：

.main{
    position:relative;
    width: 550px;
    border: 1px solid magenta;
}

.left{
    width: 300px;
}

.right{
    float: right;
    width: 200px;
}

.checkbox{
    width: 20px;
    height: 20px;
    padding: 20px;
    background: #eee;
    position: absolute;
    bottom: 0;
    right: 0;
}

Answer 2

这是你的jfiddle的修改版本，因为它希望第一列高于第二列。 如果你不能保证这一点，那么从css中删除margin-top：-16px，你应该没问题。

HTML：

<div>
    <div class='column1'>
        All the text comes here  All the text comes here  
        All the text comes here  All the text comes here 
        All the text comes here  All the text comes here  
        All the text comes here  All the text comes here  
        All the text comes here  All the text comes here  
        All the text comes here  All the text comes here
    </div>
    <div class='column2'>
        All the text comes here  All the text comes here  
        All the text comes here  All the text comes here 
    </div>
</div>
<div class="tick">
   this is where the check box goes <input type="checkbox"/>
</div>
<br style='clear:both'/><br/>
<p>Continue with content....</p>​

CSS：

.column1 {
    width : 50%;
    float : left;
    margin-right : 10px;    
}

.column2 {
    overflow : none;
}

.tick {
    clear : both;
    float : right;
    margin-top:-16px;
}​

Answer 3

根据约翰的建议。 我能够拿出这个似乎最终起作用的东西。 这是css：

.container

{
    position:relative;
    padding-left:10px;
    margin-bottom:10px;
    margin-top:10px;
 }
.column1
{
    width : 70%;
    float : left;
    margin-right:10px; 
}

.tick {
    clear : both;
    float : right;
    margin-top:-16px;
}

在表中，这是标记：

<table style="width:100%">
<tr>
 <td>
  <div class="container">
   <div class="column1">
     Text in column1 Text in column1 Text in column1 Text in column1 Text in column1   
     Text in column1 Text in column1 Text in column1 Text in column1 Text in column1 
     Text in column1 Text in column1 Text in column1 Text in column1 Text in column1 
   </div>
  <div>
     <div>
      text in column 2 text in column 2 text in column 2 text in column 2 text in column     
       2 text in column 2 
     </div>
     <div class="tick">
      <input type="checkbox">
     </div>
  </div>

  </div>
  </td>
 <tr>
<table>

希望我不会错过任何其他内容。 感谢所有的答复。