css - 背景色の分割

Question

-の背景色を分割しようとしていdivます。左側を白、右側を黒にします。div2つのdivがネストされたラッパーを使用しようとしましたが、黒いdivが必要なようにラッパーdivを100％埋めていません。

これがフィドルです：

http://jsfiddle.net/nP8Qq/2/

Answer 1

このようなもの？

http://jsfiddle.net/nP8Qq/10/

divに色を追加して、それらがどこにあるかを確認できるようにしました。背景のdivに色を付けたので、黒いdivの高さが十分でない場合は、わかりません。

不足している終了タグを追加しました<p>Content</p>

Answer 2

わかりました。コードが機能しない理由については回答していません（Steve Wellensによるソリューションは完璧です）。複数の色の背景を持つためのおそらくよりエレガントな解決策を提案しています： Color-stopを使用した線形グラデーション。

に線形グラデーションを適用できます。div複数の色（この場合は2）が必要なため、を指定できますcolor-stop。を使用するcolor-stopと、グラデーションの線に沿って新しい色を開始する場所を指定できますpercentage。50％を指定すると、線形グラデーションのちょうど中間で新しい色が始まります。

目的の効果が得られるまで、パーセンテージを試してみることができます。

以下をチェックしてください、彼らはあなたがやろうとしていることをグラデーションで達成しました：

線形グラデーション/カラーストップ

線形グラジエントリファレンス

CSSトリック-カラーストップ

それがあなたに役立つかどうかを確認してください。