Html 如何防止响应网页中的div重叠

当我缩小页面时，我需要阻止我的div在响应性网页中重叠。 我怎么能这样做？ 我试图寻找解决办法，但还没有找到任何办法

HTML:

我读过其他答案，但他们的代码似乎与我的不同。

---

我是HTML CSS的初学者。

div没有重叠。只是当div缩小时，图像大小保持不变，所以图像最终看起来像是重叠的

请尝试以下方法：

HTML

这是密码笔：

---

应用33%的宽度意味着

image\u框

周围的所有

div

将是父

div

的33%，父

div是第一个内部
div
。卸下第一个内部
div

其次，为图像设置
max width
，意味着如果图像大于父div，他们会感觉到任何可用空间，并且可能超出父div

收缩页面时会发生这种情况。因为

image\u框

将占当前父

div

大小的33%。因此，页面越小，

div

得到的越小，但图像的大小不会因为其最大宽度而减小

使用flexbox可以解决这个问题。如下图所示

.图像盒{
背景色：无；
宽度：200px；
}
img{
宽度：200px；
高度：200px；
}
.pagepicturecontainer{
显示器：flex；
柔性包装：包装；
}

你已经超越了自己。首先，试着理解如何正确使用“类”。你还没有准备好回应！上面的代码是在我上一篇文章中在这个网站上给我的，我完全理解类。如果你理解类，那么你就会明白你可以用一个类替换你当前的所有类，因为它们都具有相同的属性。取出图像，在div周围加上边框（使用css）看看你的行为是否符合你的期望。您可能会发现问题出在图像上，而不是div。@geoidesic我知道我可以做到，但我计划将这些图片放在多个页面上&每个图片都有自己的边框，周围有不同的颜色。尝试此方法后，图像大小保持不变。

<div class="pagepicturecontainer">
            <div>
                <div class="image_box1" > <a href="riders.html"> <img src="./img/bike1tl.jpg"></div>
                <div class="image_box2" > <a href="riders.html"> <img src="./img/bike2tm.jpg"></div>
                <div class="image_box3" > <a href="riders.html"> <img src="./img/bike3tr.jpg"></div>
                <div class="image_box4" > <a href="riders.html"> <img src="./img/bike4bl.jpg"></div>
                <div class="image_box5" > <a href="riders.html"> <img src="./img/bike5bm.jpg"></div>
                <div class="image_box6" > <a href="riders.html"> <img src="./img/bike6br.jpg"></div>
            </div>
</div>

`.image_box1 {
  width: 33%;
  background-color: none;
  float: left;
}

.image_box2 {
  width: 33%;
  background-color: none;
  float: left;
}

.image_box3 {
 width: 33%;
 background-color: none;
 float: left;
}

.image_box4 {
 width: 33%;
 background-color: none;
 float: left;
}

.image_box5 {
 width: 33%;
 background-color: none;
 float: left;
}

.image_box6 {
 width: 33%;
 background-color: none;
 float: left;
}

img {
 display: block;
 max-width:412px;
 max-height:523px;
 width: auto;
 height: auto;
}

.pagepicturecontainer{
    margin-left: 190px;
}`

<div class="pagepicturecontainer">
        <div>
            <div class="image_box" > <a href="riders.html"> <img src="./img/bike1tl.jpg"></div>
            <div class="image_box" > <a href="riders.html"> <img src="./img/bike2tm.jpg"></div>
            <div class="image_box" > <a href="riders.html"> <img src="./img/bike3tr.jpg"></div>
            <div class="image_box" > <a href="riders.html"> <img src="./img/bike4bl.jpg"></div>
            <div class="image_box" > <a href="riders.html"> <img src="./img/bike5bm.jpg"></div>
            <div class="image_box" > <a href="riders.html"> <img src="./img/bike6br.jpg"></div>
        </div>
</div>

.image_box {
  width: 33%;
  background-color: none;
  float: left;
  border: 1px solid green;
  position: relative;
 max-width:412px;
 max-height:523px;
}

img {
 display: block;
 max-width:100%;
 max-height:100%;
 width: auto;
 height: auto;
}

.pagepicturecontainer{
    margin-left: 190px;
}