Question

您好，我正在创建一个网站，我无法将div放在我的主计算机屏幕上，而不会弄乱我的小型笔记本电脑。我正在使用百分比，但似乎没有帮助我将附加2张不同的图片和我的CSS。提前谢谢。

CSS

body {
  background-color: black;
}

.box {
  position: absolute;
  border-radius: 5%;
  width: 8%;
  height: 4%;
  margin: 5%;
  background-color: #888888;
  border-style: solid;
  border-width: medium;
  border-color: orange;
}

.Forum-Block {
  position: absolute;
  border-radius: 5%;
  left: 10%;
  top: 0%;
  width: 70%;
  height: 140%;
  margin: 5%;
  background-color: #888888;
  border-style: solid;
  border-width: medium;
  border-color: orange;
}

.Top-Bar {
  position: absolute;
  height: 30px;
  width: 60%;
  top: 8%;
  left: 10%;
}

.Back-Box {
  float: right;
  padding: 3%;
  color: white;
  background-color: black;
}

.FriendsB-Box {
  float: right;
  padding: 3%;
  color: white;
  background-color: black;
}

.RequestsB-Box {
  float: right;
  padding: 3%;
  color: white;
  background-color: black;
}

.SentRequestsB-Box {
  float: right;
  padding: 3%;
  color: white;
  background-color: black;
}

.SendRequestB-Box {
  float: right;
  padding: 3%;
  color: white;
  background-color: black;
}

.PendingRequestsB-Box {
  float: right;
  padding: 3%;
  color: white;
  background-color: black;
}

.Back-Box:hover {
  background-color: #262626;
}

.FriendsB-Box:hover {
  background-color: #262626;
}

.RequestsB-Box:hover {
  background-color: #262626;
}

.SentRequestsB-Box:hover {
  background-color: #262626;
}

.SendRequestB-Box:hover {
  background-color: #262626;
}

.PendingRequestsB-Box:hover {
  background-color: #262626;
}

Answer 1

你需要创建一个这种类型的CSS来实现区分16英寸笔记本电脑，每个例子10个。

@media screen and (min-width: 900px) {
    body {
        background-color: lightgreen;
    }
}

@media screen and (max-width: 901px) {
    body {
        background-color: blue;
    }
}

Answer 2

如果div处于适当位置，则无法将div居中，因为它会根据屏幕大小更改div的位置。

添加带有问题的Html代码可以更好地解决问题。

我的CSS在不同的屏幕上是不同的 - 不能居中div

2 个答案: