1

我已经尝试调整这个两天了，但无法修复它。请帮帮我。我有这个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>​

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

文本列 1 文本列 2

文本列 1

textincolumn1
textincolumn1
textincolumn1 复选框

请帮我改正。非常感谢你。

4

3 回答 3

2

为什么不使用无表方法？

也许是这样的：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;
}
于 2012-06-25T21:38:02.330 回答
1

这是您的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;
}​
于 2012-06-25T21:43:32.533 回答
0

根据 John 的建议。我能够想出这个似乎最终可行的方法。这是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>

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

于 2012-06-25T23:06:39.017 回答