gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 14:09:23 26 4
gpt4 key购买 nike

我查看了其他提出类似问题的问题,但它们的答案似乎不适用于我的问题。我有一个网站,在新闻 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;
}

最佳答案

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

添加:

body {
min-width: 1400px;
}

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

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

媒体查询是这样使用的:

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

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

}

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

关于css - float Div 在主要内容后面重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20896026/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com