1

私はこれを2日間微調整しようとしましたが、修正できませんでした。私を助けてください。私はこの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>​

最初の列の高さに基づいて、2番目の列の右下隅にチェックボックスを表示させたいのです。何かのようなもの：

textincolumn1 textincolumn2

textincolumn1

textincolumn1textincolumn1textincolumn1
チェック
ボックスはこちら

訂正を手伝ってください。どうもありがとうございます。

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

これは、最初の列が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;
}​
于 2012-06-25T21:43:32.533 に答える
0

ジョンの提案に基づいています。最終的にうまくいくように見えるこれを思いつくことができました。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 に答える