0

中央にラップ (固定幅と動的パディング) があり、いくつかの p タグ内にあります。これらのタグの backgroundColor はブラウザの左側の境界線まで拡張する必要がありますが、コンテンツは中央のコンテンツ領域内にとどまる必要があります。

なんとか JavaScript ( Example ) で作ることができました。

HTML:

<div>
    <p>asd</p><br>
    <p>asd</p><br>
    <p>asd</p>
</div>

JS:

$(document).ready(function() {
    $('p').css('padding-left', $('div').css('padding-left')).css('margin-left', "-" + $('div').css('padding-left'));
});

CSS:

div {
    width: 300px;
    background: green;
    padding: 0 calc(50% - 150px)
}

p {
    height: 50px;
    margin-bottom: 10px;
    background: blue;
    display: inline-block;
}

しかし、cssのみでそのようにしたいと思います。JavaScript を使用せずにその動作を取得する方法はありますか?

FF、Chrome、iPad iOS5/6 Safari、IE9+に対応している必要があります。

/編集：

これまでの返信に感謝します。インライン要素のように、必要な最小幅が必要なため、p要素でインラインブロックを使用して、右に拡張しないようにしました。しかし、次の要素を新しい行に配置したい (より良い解決策があれば、それは大歓迎です)

PaulvdTool のおかげで、解決策を見つけることができました: http://jsfiddle.net/EFhkH/2/

それでも、インラインブロックの後に改行を強制するより良いアイデアがある場合は、どういたしまして

4

1 に答える 1

1

あなたが望んでいること（あなたの説明からわかるように）は、あなたのフィドルでさえ起こっていません。画面のサイズを変更すると、青が左側に留まりません。CSSで作ってみたのですが、:before要素を使って何とかできました。この効果は、1 行のテキストでのみ機能します。

たぶん、誰かがこれを拡張できます。

CSS

#container {
    width: 300px;
    background: silver;
    margin: 0 auto 0 auto;
}
.text {
    width: 100%;
    background: gray;
}
.text:before {
    content: ".";
    background: gray;
    width: 50%;
    position: absolute;
    left: 0;
    z-index: -1;
    color: gray;
}

HTML

<div id="container">
    <div class="text"><p>line 1</p></div>
    <div class="text"><p>line 2</p></div>
    <div class="text"><p>line 3</p></div>
    <div class="text"><p>line 4a<br />line 4b</p></div>
/div>

http://jsfiddle.net/PaulvdDool/rtRQD/

編集ドット「。」を追加してごまかしました。そうしないと、背景が表示されませんでした。背景と同じ色にしてドットを見えないようにしました。

于 2013-06-03T13:35:35.637 に答える