Question

我看过其他问过类似事情的问题，但对他们的答案似乎并不适用于我的问题。我有一个网站，在新闻滑块的两侧都包含两个div，它也在div中。侧面的div都漂浮到各自的侧面。问题是，当我使窗口变小时，它们（adLeft和adRight）与中心sliderDiv重叠并在其后面。我尝试了各种各样的事情，比如制作一个最小宽度，溢出被隐藏，或改变填充和边距，但我从来没有看到任何区别。任何帮助将不胜感激！

以下是网站：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;
}

你的风格应该做的伎俩。最小宽度需要应用于body，因为这是整个容器，其他所有东西都是从其继承宽度和定位。

或者，如果您不希望在屏幕小于最小宽度时切断页面，则可以使用媒体查询隐藏或移动左侧和右侧图像，使其不再处于某个位置导致重叠。

媒体查询的用法如下：

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

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

}

我希望有帮助，如果您有任何疑问，请与我联系，干杯！

主要内容背后的浮动重叠重叠

1 个答案: