css - float Div 在主要内容后面重叠

Question

我查看了其他提出类似问题的问题，但它们的答案似乎不适用于我的问题。我有一个网站，在新闻 slider 的两侧包含两个 div，它也在一个 div 中。侧面 div 都 float 到各自的侧面。问题是，当我缩小窗口时，它们(adLeft 和 adRight)与中心 sliderDiv 重叠并在其后面。我尝试过各种方法，例如设置最小宽度、 overflow hidden 或更改填充和边距，但我从未发现有任何区别。任何帮助将不胜感激!

这是网站:http://thehummingbirdplace.com/

这是相关的 html:

<div id="adLeft">
    <a href="http://www.amazon.com/Kathleen-Ball/e/B007QNUTC8/ref=ntt_athr_dp_pel_1/" target="_blank">
        <img src="_images/advertisements/autumn.png" width="200" height="300" alt="Autumn's Hope" />
    </a>
<br><br>
    <a href="http://www.romancestorytime.com/" target="_blank">
        <img src="_images/advertisements/loveCowboy.png" width="200" height="300" alt="For the Love of a Cowboy" />
    </a>
</div>

<div class="clear">
</div>

<div id="adRight">
    <a href="http://www.jeanjoachimbooks.com/" target="_blank">
        <img src="_images/advertisements/lovesLastChance.png" width="200" height="300" alt="Love's Last Chance" />
    </a>
<br><br>
    <a href="http://www.jeanjoachimbooks.com/" target="_blank">
        <img src="_images/advertisements/loversLiars.png" width="200" height="300" alt="Lovers and Liars" />
    </a>
</div>

<div class="clear">
</div>

<div class="sliderDiv" id="slider">
    <a href="episode/12/30.html"><img src="_images/podcast/123013_slider.png" width="851" height="323" alt="Later in Life Romances" /></a>

    <a href="episode/12/23.html"><img src="_images/podcast/122313_slider.png" width="851" height="323" alt="Christmas Contemporary Romances" /></a>

    <a href="episode/12/16.html"><img src="_images/podcast/121613_slider.png" width="851" height="323" alt="Christmas Historicals" /></a>

    <a href="episode/12/9.html"><img src="_images/podcast/120913_slider.png" width="851" height="323" alt="Christmas Novellas" /></a>

    <a href="archive.html"><img src="_images/podcast/archive_slider.png" width="851" height="323" alt="Archive" /></a>

</div>

这是适用于它的 css:

#adLeft {
width: 200px;
margin-right: 50px;
float: left;
margin-left: 20px;
}

#adRight {
width: 200px;
margin-left: 50px;
float: right;
margin-right: 20px;
}

.clear {
float: clear;
}

.sliderDiv {
margin-right: auto;
margin-left: auto;
width: 851px;
position: relative;
z-index: 1;
margin-top: -48px;
}

Answer 1

我相信您使用 min-width 是正确的，因为您可以在页面主体上使用它来防止它缩小到重叠点。

添加:

body {
    min-width: 1400px;
}

您的样式应该可以解决问题。 min-width 需要应用于 body，因为它是整个容器，其他所有内容都从中继承宽度并定位。

或者，如果您不希望您的页面在屏幕小于最小宽度时被截断，您可以使用媒体查询来隐藏或移动左侧和右侧图像，以便它们不再位于某个位置造成重叠。

媒体查询是这样使用的:

@media only screen
and (max-width: 1400px){

    #adLeft, #adRight {
        /* Some sort of styles here */
    }

}

希望对你有帮助，有问题可以私信我 干杯!