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>

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

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

3 个答案: