Question

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

HTML：

<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>

CSS：

`.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;
}`

我已经阅读了其他答案，但他们的代码似乎与我的不同。我是HTML CSS的初学者。

Answer 1

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

请改为尝试：

HTML

<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>

CSS

.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;
}

这里是codepen： https://codepen.io/geoidesic/full/VXJNRN/

Answer 2

应用33％的宽度意味着divs周围的所有image_box将占父div的33％，这是第一个内div。删除第一个内部div。

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

缩小页面时会发生这种情况。由于image_box将占当前父div大小的33％。因此页面越小，div越小，但由于其最大宽度，图像的大小不会减小。

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
<style>
.image_box {
  background-color: none;
  width: 200px;
}

img {
    width: 200px;
    height: 200px;
}

.pagepicturecontainer{
    display: flex;
    flex-wrap: wrap;
}
</style>
    <body>
    <div class="pagepicturecontainer">
            <div class="image_box">
                <a href="riders.html">
                    <img src="https://www.cats.org.uk/uploads/images/featurebox_sidebar_kids/grief-and-loss.jpg">
            </div>
            <div class="image_box">
                <a href="riders.html">
                    <img src="https://www.cats.org.uk/uploads/images/featurebox_sidebar_kids/grief-and-loss.jpg">
            </div>
            <div class="image_box">
                <a href="riders.html">
                    <img src="https://www.cats.org.uk/uploads/images/featurebox_sidebar_kids/grief-and-loss.jpg">
            </div>
            <div class="image_box">
                <a href="riders.html">
                    <img src="https://www.cats.org.uk/uploads/images/featurebox_sidebar_kids/grief-and-loss.jpg">
            </div>
            <div class="image_box">
                <a href="riders.html">
                    <img src="https://www.cats.org.uk/uploads/images/featurebox_sidebar_kids/grief-and-loss.jpg">
            </div>
            <div class="image_box">
                <a href="riders.html">
                    <img src="https://www.cats.org.uk/uploads/images/featurebox_sidebar_kids/grief-and-loss.jpg">
            </div>
    </div>

    </body>
</html>

Check this if you are new to flexbox

and this

如何在响应式网页中阻止div重叠

2 个答案: