随着窗口宽度的缩小，并排的 div 重叠

Question

回答：我在 8 小时内无法回答自己的问题。答案如下。

我已经知道如何解决我遇到的问题。这是工作的 JSFiddle：http://jsfiddle.net/8fRTH/7/

首先，我没有将图像显示为每个 div 的背景图像，而是将它们放在每个相应 div 的 img 标签中。然后我应用了 max-width: 100%;到每张图片。

 /*----------------------------------------------------------
 *  Logo & Carousel strip
 *----------------------------------------------------------*/
#logo-bar {
    max-height: 300px;
    overflow: hidden;
}

#logo-bar div {
    margin: 0;
}

#logo-bar img {
    max-width: 100%;
}

我添加了一个溢出：隐藏；到主容器，以补偿#carousel 图像大于我希望默认为#logo-bar 容器的高度这一事实。

之后，我创建了一些 Javascript 以在浏览器调整大小以将 #logo-bar 容器高度调整为 #logo-box 中图像的高度时触发。

$(window).resize(function(){     
    $('#logo-bar').height( $('#logo-box img').height() );
});

这使得容器高度缩小的速度与浏览器通过调整浏览器窗口大小自然缩小徽标的速度相同，这反过来又只在#carousel-box div中显示正确数量的图像。

感谢所有花时间查看此内容并提供帮助的人！

原帖

提前感谢您抽出宝贵时间阅读本文。

我有两个并排的 div：#logo 和 #carousel。 #logo 的宽度为 33%，#carousel 的宽度为 66%。当浏览器最大化时，它们按预期并排放置。但是，随着浏览器窗口的缩小，#carousel div 开始向左移动并与#logo div 重叠。

我的预期结果是，由于每个 div 占总宽度的 %，随着浏览器窗口的缩小，每个 div 都会相应地调整。这不是正在发生的事情。此外，如果我让浏览器保持较小的尺寸并重新加载页面，右 div 仍会与左 div 重叠。我不确定他们为什么会有这种行为，因为他们每个人都应该是总窗口大小的固定百分比。

任何意见或建议将不胜感激。感谢您的宝贵时间。

编辑#2： http://jsfiddle.net/8fRTH/3/

我编辑了 JSFiddle 以包含图像来演示问题。

编辑：相关代码如下：

<!--============================================
    Logo/Carousel Bar
================================================-->
    <div class="section group" id="logo-bar">
        <div class="col span_1_of_3" id="logo-box">&nbsp;</div>
        <div class="col span_2_of_3" id="carousel-box">&nbsp;</div>
    </div>

/*----------------------------------------------------------
 *  Logo & Carousel strip
 *----------------------------------------------------------*/
#logo-bar {
    height: 300px;
}

#logo-bar div {
    margin: 0;
}

#logo-box {
    height: inherit;
    background-image: url("../img/raffa-logo.png");
    background-size: cover;
}

#carousel-box {
    height: inherit;
    background-image: url("../img/carousel-slide-1.jpg");
    background-size: cover;
}

/*  SECTIONS  ============================================================================= */

.section {
    clear: both;
    padding: 0px;
    margin: 0px;
}

/*  GROUPING  ============================================================================= */


.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

/*  GRID COLUMN SETUP   ==================================================================== */

.col {
    display: block;
    float:left;
    margin: 1% 0 1% 1.6%;
}

.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */


/*  REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */

@media only screen and (max-width: 480px) {
    .col { 
        margin: 1% 0 1% 0%;
    }
}

/*  GRID OF THREE   ============================================================================= */


.span_3_of_3 {
    width: 100%; 
}

.span_2_of_3 {
    width: 66.13%; 
}

.span_1_of_3 {
    width: 32.26%; 
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    .span_3_of_3 {
        width: 100%; 
    }
    .span_2_of_3 {
        width: 100%; 
    }
    .span_1_of_3 {
        width: 100%;
    }
}

Answer 1

要达到您想要的效果，请删除 background-size: cover 并将背景宽度或高度（但不能同时）固定在 100%。这将确保背景图像扩展到元素的大小但不会溢出。在你的情况下，我相信你想修复宽度：

background-size: 100% auto;

编辑

在这里工作得很好：