當瀏覽器調整大小時背景div不伸縮的顏色

我試圖創建一個選擇區域，當瀏覽器調整大小時（寬度減小），伸展以保持其內容。我試圖複製這個主題的橙色圖片區域：http://anpsthemes.com/demo/?theme=constructo（經典演示），它說「爲您的項目提供快速和可靠的服務......」請注意，背景圖片不會伸展，但是當您調整瀏覽器大小時顯示更多的圖像。這是我想要的。當瀏覽器調整大小時背景div不伸縮的顏色

我對圖像沒有好運，所以嘗試過背景顏色，發生同樣的事情，背景圖像或顏色不會在內容後面「伸展」。這是我到目前爲止的代碼：

.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

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

來源

2015-04-24 bob32

哪個背景不適合你？在Chrome中顯示正常工作（如果它是'.oi'）。 – adamdc78

.left和.right浮動，因此包含元素，例如.oi將不包含它們，這就是爲什麼當窗口調整大小時它們溢出。

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

來源

2015-04-24 01:03:25 ShastriH

謝謝！哇。我在左側和右側div下面添加了

，現在它完全按照預期工作。這很有趣，我之前有明確的代碼，但是當我做了額外的更改時就刪除了。再次感謝:) – bob32

如果你想看看clearfix如何工作，你可以在這裏查看：[jsfiddle]（http://jsfiddle.net/Ln0j07q6/） – ShastriH

謝謝你花時間展示這對我來說。很有幫助：） – bob32

當瀏覽器調整大小時背景div不伸縮的顏色

回答

相關問題