調整瀏覽器大小時背景div的顏色未拉伸

Question

我正在嘗試創建一個選擇加入區域，該區域可以在調整瀏覽器大小（減小寬度）時拉伸以容納其內容。 我正在嘗試復制此主題的橙色圖片區域： http : //anpsthemes.com/demo/? theme= constructo （經典演示），其中顯示“為您的項目提供快速可靠的服務...”，請注意背景圖像不會拉伸，但是當您調整瀏覽器大小時，它會顯示更多圖像。 這就是我想要的。

我對圖像沒有運氣，所以嘗試使用背景色，並且發生了同樣的事情，背景圖像或顏色沒有“伸展”到內容的后面。 到目前為止，這是我的代碼：

.oi {
    /*background:url(opt-bg.jpg);*/
    background-color:#f46a68;   
    width:100%;
    min-height: 100px;
}

.oi-container{          
    max-width: 1310px;
    margin: 0 auto 0 auto;
    padding-top:22px;   
}   

.left{
    max-width:670px;
    float:left;
}

.right{
    max-width:570px;
    margin-left:30px;
    float:left;
}

<div class="oi">
    <div class="oi-container">

        <div class="left">
            <div class="txt-top">GET FREE TIPS TO CREATE THE LIFE YOU LOVE</div>
            <div class="txt-bot">+ BONUS Why most health businesses fail and how to avoid it</div>
        </div>

        <div class="right">
            <form action="#" method="post" id="oi">
                <input type="text" class="input" value="first name" />
                <input type="text" class="input" value="email address" />
                <input type="button" onclick="document.getElementById('oi').submit();" value"get it" class="btn-get-it" />
            </form>
        </div>

    </div>
</div>

我確實檢查了主題的代碼，但無法真正復制它，彼此之間的位置div不好。 您可以在此處實時查看代碼： http : //itlive.ca/oi

任何幫助或朝着正確方向的觀點將不勝感激。

Answer 1

.left和.right是浮動的，因此包含元素（例如.oi將不包含它們，這就是為什么在調整窗口大小時它們會溢出。

可以以某種方式清除這些浮點（在下面添加另一個元素並應用clear CSS屬性，或使用clearfix方法）是一種解決方案。