Question

我是一名学习html / css的学生，而我的第一个网站遇到了麻烦。我在配置页面时遇到很多困难，因此页面不固定而不是固定的。我配置了一个框，一个图像和一些文本，因此它们在页面上是绝对的，但我无法使页面本身流畅地适合浏览器（且不能太大）。这是css / html：

body {
  background-color: white;
}

.square {
  position: absolute;
  left: 0px;
  top: 0px;
  box-sizing: border-box;
  background-color: rgb(49, 184, 184);
  width: 2023px;
  height: 842px;
}

.image {
  position: absolute;
  left: 588px;
  top: 41px;
  width: 1376px;
  height: 927px;
}

.con {
  position: absolute;
  font-size: 200px;
  color: white;
  width: 271px;
  height: 209px;
  left: 293px;
  top: 106px;
}

.view {
  position: absolute;
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  background-color: rgba(0, 103, 103, 0.7);
  border-color: transparent;
  font-size: 200px;
  color: white;
  left: 588px;
  top: 104px;
  width: 396px;
  height: 212px;
}

html,
body,
square,
image,
con,
view {
  display: block
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>ConView</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div class="square"></div>
  <img src="indeximage.jpg" class="image">
  <p class="con">con</p>
  <p class="view">view</p>
</body>

</html>

Answer 1

上述方法的主要问题是已将固定宽度分配给页面上的不同元素。在这方面，媒体查询将是您最好的朋友。它使您知道设备尺寸，并且可以针对不同的设备尺寸约束实施不同的样式。在这种情况下，您可以将浏览器尺寸设置为正方形的宽度，而不是分配固定的宽度。 Media Query

Answer 2

您应该创建另一个div并将其用作其他内容的包装器，并将wrapper div的属性设置为100％，然后将其他div放置在包装器div中，并将内部div的宽度设置为100％。还要将图像放置在内部一个div，您可以轻松定位图片

无法使我的网页适合屏幕（流体），而是太大而无法容纳并水平滚动

2 个答案: