2

CSS3 列を含むページがあり、疑似要素をインライン要素と同じ Y 位置に配置しようとしていますが、固定 X 位置 (左マージン) に配置しようとしています。これは最初の列ではうまく機能しますが、他の列のこれらの疑似要素の残りは適切に動作しません。

最終的に何が起こるかというと、疑似要素が左マージンに沿って配置されます。これは、要素が単一の列にある場合に配置される場所です。下にスクロールすると、左側に緑色のブロックが表示されます。テキストが 1 つの列にある場合の場所です。

私が望むのは、緑のブロックが存在するテキスト行の左端の列ギャップ領域にあることです。

問題はこのコードにあると思います：

.marker:after {
    content: ' ';
    display: block;
    white-space: nowrap;
    position: absolute;
    left: 0px;
    width: 0;
    height: 0;
    border: 6px solid green;
}

JSFiddle: http://jsfiddle.net/o0xu0e2x/1/

注: 私のアプリケーションは Chromium 41+ のサポートのみを必要とするため、-webkit タグを使用しています。疑似要素 :before/:after の使用は問題ではなく、どちらもこのように動作します。

4

1 に答える 1

0

.section親要素を相対的に配置する必要があります。

そうすることで、絶対配置された疑似要素は、ウィンドウではなく要素に対して相対的に配置されます。.section

更新された例

.section {
    position: relative;
}
于 2015-02-17T16:18:43.870 に答える