0

何が起こっているのか、それを修正する方法を理解するのに苦労しています。

表形式のデータを表示するときに幅の問題を引き起こしているアイコンを含む div がいくつかあります。アイコンを含む div を削除すると、行幅は希望どおりになります (以下の firefox の例を参照してください)。

これが私が望むFirefoxのビューです（同じy座標、またはその付近に配置された赤で囲まれたアイコンの配置に注意してください）： alt text http://www.redsandstech.com/ff_display.jpg

IE7 でのビューは次のとおりです (アイコンと、表の行である灰色の線の幅に何が起こるかに注意してください): alt text http://www.redsandstech.com/ie_display.jpg

HTMLは次のとおりです。

<table>
 <tbody>
  <tr>
    <td>
        <span>stuff 1</span>
        <span>stuff 2</span>
        <div class="prop_edit"><img class="img_height14" src="edit.jpg"></div>
        <div class="prop_archive"><img class="img_height14" src="archive.jpg"></div>
        <div class="prop_delete"><img class="img_height14" src="delete.jpg"></div>
        <div style="display:none;"> 
             <div>Links Here</div>
        </div>
     </td>
  </tr>
</tbody>

CSSは次のとおりです。

.prop_edit{
float:right;
position: relative;
top: 0px;
right:50px; 

}
.prop_archive{
    float:right;
    position: relative;
    top: 0px;
    right:10px;
}
.prop_delete{
    float:right;
    position: relative;
    top: 0px;
    right: -30px;
}
.img_height14{
    height:14px;
    vertical-align:top;
    position:relative;
}

私はさまざまなcssを試しましたが、実際には何かを理解したいと思ってハッキングしています。誰でも私を助けることができるいくつかのヒントを得ましたか?

前もって感謝します。

4

1 に答える 1

0

なぜ分割が必要なのですか？画像自体を右に浮かせるだけです。私が何百万人もの人々に言ったように、テーブル内で除算を使用すると、修正できない悪影響が発生する可能性があります。

私の推測ではright: -30px、右側に 30px を追加してスペースを空けるように解釈されています。ただし、画像を右にフロートさせるだけの方がはるかに優れたソリューションであり、画像の周りにマージンを追加して、適切なスペースを確保できます。

また、コンテンツの後ではなく、最初に何かをフロートする必要があります。ほとんどのブラウザは通常、コンテンツがコンテンツの後にある場合、コンテンツを右にフロートさせて新しい行に配置します。これは適切な動作です。これは、デフォルトでは、部門はそれ自体で新しい行を開始し、その後、通常はすでに作成された同じ新しい行で、右にフロートするように変更されるためです。

ええ、問題を引き起こしているいくつかの異なることがあります。ただし、すべての問題を引き起こしているのは 1 つのことではありません。

于 2010-04-05T23:10:39.963 に答える