当窗口宽度缩小时，并排的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图像大于#log-bar容器默认的高度。

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

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

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

感谢所有花时间看这个并提供帮助的人！

原始帖子

提前感谢您花时间阅读本文。

我有两个并排的div：#logo和#carousel。 #logo的宽度为33％，＃carl的宽度为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;

修改

在这里工作得很好：