Question

我正在尝试创建一个选择加入区域，该区域在浏览器调整大小（宽度较小）时伸展以保持其内容。我正在尝试复制这个主题的橙色图片区域：http://anpsthemes.com/demo/?theme=constructo（经典演示），它表示＆＃34;为您的项目提供快速可靠的服务......＆＃34;请注意，背景图像不会拉伸，但是当您调整浏览器大小时，它会显示更多图像。这就是我想要的。

我对图像没有运气，所以尝试了背景颜色，同样的事情发生了，背景图像或颜色没有＆＃34;拉伸＆＃34;背后的内容。到目前为止，这是我的代码：

.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方法）可能是一个解决方案。

浏览器调整大小时背景div的颜色不会拉伸

1 个答案: