4

それぞれ独自の行に3つの緑色のボックスがあるWebページがあります。各緑色のボックスには、緑色のボックスにカーソルを合わせると表示される赤いボックスも関連付けられています。すべての緑色のボックスは、最も幅の広い緑色のボックスを収容するのに十分な幅のブラックボックス内に含まれています。

JSFiddle

ここに画像の説明を入力してください

質問

短い緑色のボックスを広げて、最も広い緑色のボックスの幅に一致させるにはどうすればよいですか？これが私が見たいもののMSPaint表現です：

ここに画像の説明を入力してください

私がテストしているブラウザ

少なくとも、Internet Explorer 7、8、および9をサポートしたいと思います。Firefoxはオプションです。他のブラウザのサポートには興味がありません。

私がこれまでに試したこと

私はこれを達成するためにいくつかの試みをしましたが、私はそれを私が望むように動作させることができません。（退屈な場合は、これらの次の部分をスキップしてください。）

試行1

それぞれの緑色のブロックにdisplay:blockスタイルを与え<br/>、それらの間のsを削除しました。

JSFiddle

ここに画像の説明を入力してください

緑のボックスのサイズが正常に変更されました。ただし、各赤いボックスは、右側ではなく、それぞれの緑色のボックスの下に表示されます。赤いボックスを要素と同じ行に配置する方法があるかどうかわからないので、blockこのアプローチを断念しました。

2.0を試みます

それぞれの緑色のボックスに100％の幅を与え、<br/>それらの間のsを削除しました。

JSFiddle

ここに画像の説明を入力してください

（緑と赤のボックスの間のギャップは無視してください。2つのスパンの間に空白があり、修復が簡単なため、そこにあります。）

緑のボックスはすべて同じサイズですが、幅が約50ピクセルで、黒のボックスの端を超えています。

その他のブラウザ固有の問題：

  • IE7では、ボックスはすべて1行に表示されます。
  • Firefoxでは、赤いボックスがそれぞれの緑のボックスの下に表示されます。

2.1を試みます

Attempt 2.0から、緑色のボックスのパディングを削除しました。パディングは非常に強力な「あるといい」機能ですが、文字通りそれを持たない方法がない場合は捨てます。

JSFiddle

ここに画像の説明を入力してください

緑のボックスは黒のボックスの端を1px超えて伸びています。これは煩わしいですが、受け入れられないことではありません。ボックスはまだ幅が広すぎます。2.0以降のブラウザ固有の問題はすべて引き続き有効です。

2.2を試みます

試行2.1から、<br/>sを再度追加しました。

JSFiddle

ここに画像の説明を入力してください

緑のボックスは適切な幅です。ピクセルを与えるか、または取ります。

ブラウザ固有の更新：

  • ボックスはIE7では独自の行に表示されますが、すべて同じ幅ではありません。
  • Firefoxはまだ間違った位置に赤いボックスを表示します。さらに、隣接する緑色のボックスの間には大きなギャップがあります。

2.3を試みます

試行2.2から、width99％に変更しました。

JSFiddle

ここに画像の説明を入力してください

緑のボックスは黒のボックスより少し短く、許容範囲内です。それらが同じ幅である限り。

ブラウザ固有の更新：

  • IE7では、ボックスの幅はまだ同じではありません。
  • Firefoxは完全に機能しています。

したがって、この時点で75％のブラウザ互換性があります。ただし、IE7を少しでも調整しても機能しないように思われるため、この手法をあきらめました。

TL; DR

通常、列に合わせてボックスのサイズを変更することはそれほど難しくありません。ただし、ボックスに固定ピクセル幅のパディングがあり、右側に表示される必要がある絶対位置の兄弟がある場合、通常の方法は失敗します。私はこれらの特定の状況下で機能する方法を探しています。

4

2 に答える 2

2

このデモがIE7+および最新のブラウザーで機能することを確認しました。

http://jsfiddle.net/thirtydot/APVuq/4/

CSS：

.hoverBox {
    position: relative;
}

.visiblePart {
    display: block;
    border: 1px solid green;
    padding: 5px;
    white-space: nowrap;
}

.hiddenPart {
    display: none;
    border: 1px solid red;
    position: absolute;
    left: 100%;
    top: 0;
    white-space: nowrap;
}

.hoverBox:hover > .hiddenPart{
    display: block;
}

.enclosingBox {
    border: 1px solid black;
    display: inline-block;
    *display: inline;
    zoom: 1;
}

HTML：

<div class="enclosingBox">
    <div class="hoverBox">
        <span class="visiblePart">
            Box 1
        </span>
        <span class="hiddenPart">
            Hidden part of Box 1
        </span>
    </div>

    <div class="hoverBox">
        <span class="visiblePart">
            Box 2, which is much wider than box 1
        </span>
        <span class="hiddenPart">
            Hidden part of Box 2
        </span>
    </div>

    <div class="hoverBox">
        <span class="visiblePart">
            Box 3, which <br/> is split into two lines.
        </span>
        <span class="hiddenPart">
            Hidden part of Box 3
        </span>
    </div>
</div>​
于 2012-11-08T11:21:02.257 に答える
1

何を書こうとしているのか信じられませんが、古き良き時代を使ってみません<table>か？2列と3行で、2番目の列には赤いボックスが含まれています...これで簡単に実行できます。

于 2012-11-07T16:55:09.523 に答える