css Flexbox总是改变网站时，我移动它

bxjv4tth 于 2023-01-10 发布在其他

关注(0)|答案(1)|浏览(108)

我的代码有问题。每次我移动我的页面，文本都在一个完全不同的位置，大部分时间都会溢出。我对编码很陌生，我真的不知道如何修复它。
这是我的HTML数据。

html,
body {
  background-image: url('./pics-txt/group/Need2.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.filter {
  backdrop-filter: blur(2px);
  height: 100%;
  width: 100%;
  z-index: 1;
}

.container {
  display: flex;
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/opacity/see-through */
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 40%;
  height: 20%;
  padding: 20px;
  text-align: center;
}

.item {
  border: solid 0px;
  position: relative;
  left: 34%;
  top: 0%;
  padding: 2%;
  text-align: center;
  color: white;
  z-index: 2;
  font-size: 90%;
}

#text {
  position: relative;
  left: 0%;
  padding: 1%;
  top: 30%;
  z-index: 2;
  color: white;
  text-align: center;
  font-size: 180%;
}

@media only screen and (max-width:70%) {
  .container {
    width: 100%;
  }
}

<head>
  <meta charset="UTF-8" />
  <meta hrrp-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./test-txt.css">
  <title>Tomorrow x Together</title>
</head>

<body>

  <div class="filter"></div>
  <div class="container">
    <div class='item'>MOA</div>
    <div class="item">Member</div>
    <div class="item">Big Hit</div>
    <h1 id="text">Tomorrow x Together</h1>
  </div>

  </video>
</body>

我真的不知道如何修复它。我也试图只是不使用一个flexbox。但我认为我的知识不够好，我也试图在不同的弯曲方向，不同的宽度，高度之间的弯曲 Package 。工作与没有一个div。我做了一切可能的。

css

来源：https://stackoverflow.com/questions/75049661/flexbox-allways-changes-the-site-when-i-move-it

1条答案

按热度按时间

pbossiut1#

我看到它混合了位置、Z索引、Flex、百分比等。很难找出问题是什么。看起来你想让一个框居中，但我不确定。如果是这样的话，试试这个作为起点。
但同样，为了帮助您，请提供一些额外的信息所需的布局。

* {
  box-sizing: border-box;
}
body {
  height: 100%;
  margin: 0;
  background-image: url('./pics-txt/group/Need2.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.view {
  display: flex;
  width: 100%;
  min-height: 100%;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.center-container {
  width: 40%;
  height: 20%;
  margin: auto; /* center in middle */
  background-color: rgba(0, 0, 0, 0.4);
}
.container {
  display: flex;
  padding-bottom: 10px;
  border: 3px solid #f1f1f1;
  color: white;
  font-weight: bold;
  text-align: center;
  /* transform: translate(-50%, -50%); */
}
@media only screen and (max-width: 600px) {
  .center-container {
    width: 100%;
  }
}
.item {
  width: 33.333%;
  padding: 2%;
  /* z-index: 2; */
  color: white;
  font-size: 90%;
}
#text {
  padding: 1%;
  /* z-index: 2; */
  color: white;
  text-align: center;
  font-size: 180%;
}

<body>
  <div class="view">
    <div class="center-container">
      <div class="container">
        <div class='item'>MOA</div>
        <div class="item">Member</div>
        <div class="item">Big Hit</div>
      </div>
      <h1 id="text">Tomorrow x Together</h1>
    </div>
  </div>
</body>

赞(0）回复(0）举报 2023-01-10

我来回答

css Flexbox总是改变网站时，我移动它

1条答案

相关问题

热门标签

最新问答