14

中央の div レイアウトがあります。背景の div の左側は白、右側は緑にする必要があります。どちらも無限に拡張する必要があります。

とてもシンプルなはずだと思いますが、今はわかりません。簡単な解決策はありますか？ありがとうございました！

-----------------------------------------------------
(div 1)     __________________________ 
           |(div 2)         |         |
           |                |         |
           |                |         |
<- white   |     white      |  green  |   green  ->
           |                |         |
           |                |         |
           |________________|_________|

------------------------------------------------------
4

7 に答える 7

16

::afterおよび::before疑似要素を使用します。そうすれば、3 色を取得してイタリアの国旗を作成することもできます。

div {
    height:300px;
    width:100%;
    outline:thin solid black;
    position:relative;
    background:white;
}
div::after, div::before {
    height:300px;
    content:' ';
    position: absolute;
    top: 0;
    width: 33%;
}
div::after {
    right: 0;
    background-color: red;
}
div::before {
    left: 0;
    background-color: green;
}

ここにフィドルがあります：http://jsfiddle.net/g8p9pn1v/

そしてその結果：ここに画像の説明を入力

于 2014-09-05T20:32:59.540 に答える
7

2 つの色の背景画像を外側の div に追加し、ブラウザーが (並べて表示するのではなく) 拡大縮小できるようにします。

各色は、画像の幅の 50% を正確に埋めて、色がどちらの側にも漏れないようにする必要があります。

おそらく、画像を内側の div の完全に後ろに配置することさえできます。

画像を引き伸ばす方法については、次の質問を参照してください: CSS Background Repeat

于 2009-08-14T11:26:43.410 に答える
4

2 つの div bg-left と bg-right を作成し、全幅のコンテナー内に絶対位置を設定してみてはどうでしょうか。それらは絶対的に配置されているため、それらの上にコンテンツを重ねることができます。たとえば、ブートストラップ マークアップを使用すると、次のようになります。

<div class="fullwidth">
    <div class="bg-left"></div>
    <div class="bg-right"></div>    

    <div class="container">
        <div class="row">
            <div class="col-xs-6">
                Insert left side content here...
            </div>
            <div class="col-xs-6">
                Insert right side content here...
            </div>
        </div>
    </div>
</div>

それからあなたのCSS：

.fullwidth {
    position: relative;
    width: 100%;
 }
.bg-left {
    background: #000; 
    left: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    width: 50%;
}
.bg-right {
    right: 0;
    top: 0;
    bottom: 0;
    background: #ddd; 
    position: absolute;
    width: 50%;
}
于 2015-05-01T17:58:42.437 に答える
1

外側に 2 つの div を配置し、それぞれに 1 つの div を配置できます。それぞれ右揃えと左揃え。そのようです：

-----------------------------------------------------
(div)                       | (div)
           _________________|_________ 
           |(div)           |  (div)  |
           |                |         |
           |                |         |
<- white   |     white      |  green  |   green  ->
           |                |         |
           |                |         |
           |________________|_________|
                            |
------------------------------------------------------
于 2009-08-14T11:27:56.327 に答える
0

その div 内に他の 2 つの div を配置し、適切なサイズと背景色を指定します。

于 2009-08-14T11:22:31.250 に答える
0

グラデーションを使用できます。これは、必要なもののクロスブラウザー コードを取得できる Web サイトです。

http://colorzilla.com/gradient-editor/

最初は少し戸惑うかもしれませんが、とても強力なツールだと思います。

よろしく！

于 2015-06-18T19:56:44.967 に答える