css - 照合された列の CSS セパレーター

Question

2 つの列があり、それぞれの側に 1 つずつ浮かんでいます。最も長い列の上から下に移動する 1 ピクセル幅の行区切りを使用したいと思います。

むしろ、TABLE レイアウトには近づかないでください。どのレイアウトが最も長い列になるか、どのくらいの長さになるかはわかりません。

cssだけでこれを行うにはどうすればよいですか？

score 1 · Accepted Answer

このようなもの

.colright{ 
    float: right;
    border-left: 1px solid gray;
    left: -1px;
    position:relative;
}

score 0 · Accepted Answer

両方の周りに親を置き、親divに背景画像を与えることで、それを偽造することができます。背景画像は、幅200ピクセル、高さ1ピクセルで、中央に1ピクセルの黒/灰色のドットがあります。

score 0 · Accepted Answer

これはCSSで可能です。これがあなたの例の私のバージョンです: http://jsfiddle.net/AhfXc/15/

基本的に、セパレーターを親コンテナー内に絶対配置するだけです (これが機能するように、親の位置を相対的にします)。次に、上と下に子を取り付けます: 0 と下: 0. 区切りの背景を希望の色に設定できますが、破線/点線のスタイルを簡単に適用できるので、ボーダースタイルを使用しました。をしたい。

セパレーターの水平位置は列によって直接影響を受けないため、これは列の絶対幅または相対幅が既知である場合にのみ機能しますが、その場合はかなり単純な解決策です。

3 に答える 3