Question

我正忙着创建一个网站，我多次发生这个问题。当我添加我的DIV时，我的另一个div向下滑动！我怎样才能防止这种情况发生？我没经验，所以请放轻松。

CODE

<html>
<head>
<title>Gewoon Boef</title>
<style>

body {
background-color: black;
overflow: hidden;
color: #ffffff;
font-family: sans-serif;
font-size: 35px;
}

.image {
position: absolute;
right: 645.5px;
}

#boxes {
margin-top: 250px;

}

.box {
height: auto;
width: 250px;
text-align: center;
display: block;
border: 1px solid Green;
border-radius: 75px;
position: absolute;
left: -255px;
}

.box2 {
height: auto;
width: 250px;
margin-top: 5px;
text-align: center;
display: block;
border: 1px solid Green;
border-radius: 75px;
position: absolute;
left: -255px;

}

</style>
</head>
<body>
<div id="boxes">
<div class="box">kaas</div>
<br><div class="box2">Over Boef</div>
</div>
<center><img class="image" src="http://fakka.nl/wp-content/uploads/2016/02/Capture105.jpg">
</center>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script>

var main = function() {
$('.image').click(function () {
$(this).animate({
right: "-700px"
}, 1000);

$('.box').animate({
      left: "835px"
    }, 1000);

$('.box2').animate({
      left: "835px"
    }, 1000);

});
};
main();
$(document).Ready(main);

</script>

<script type="text/javascript">
  <!--
  if (screen.width <= 800) {
    window.location = "http://google.com";
  }
  //-->
</script>

</html>

Answer 1

这很简单。添加＆＃34; Top＆＃34;样式。现在，您的代码并不知道在哪里垂直放置div。

.box {
  height: auto;
  width: 250px;
  text-align: center;
  display: block;
  border: 1px solid Green;
  border-radius: 75px;
  position: absolute;
  left: -255px;
  TOP: 10px;  <---- ADD THIS.
}

另外，请勿使用半像素。

Answer 2

只需将display:block更改为display:inline-block即可。您定义宽度的事实将连续排成几行。

Answer 3

你的元素带有id＆＃34; box＆＃34;需要空间，所以它推下了它的下一个元素<center>

要防止此行为将您的id="boxes"元素和/或<center>元素置于绝对位置，请执行以下操作：

#boxes,
center {
  position: absolute;
}

Answer 4

我只是将position: fixed放入我的#boxes。这使图像出现在它的原始位置。感谢大家的帮助。我的解决方案可能不是一个好的解决方案，并可能在将来引起其他问题，但这是我目前解决问题的唯一方法。

当我放置更多DIV时，为什么我的图像会向下移动？

4 个答案: