主页 / 问题 / 1417929
Accepted
Marie
Asked:2022-08-07 23:40:04 +0800 CST2022-08-07 23:40:04 +0800 CST

定位 CSS 元素 (flex)

  • 772

伙计们，请帮忙。这里我有一个带有元素的块（标有复选标记的将使用 js 移动 - 非常小，循环，恒定），其他 2 个元素不会移动。但是你如何聪明地定位它们呢？当然，该方案是近似的）

我试图通过 flex 来实现，但是代码很糟糕（如果你通过顶部、左侧等编写）+ 到我需要让它适应 ipad（1024x768）的所有内容，但是当我更改所有尺寸时，一切分别移出（（（

我附上了代码，但它是错误的 - 只是一个使用 left 的例子，它看起来有多丑）

我相信这个问题有一个很好的解决方案 - 请指导我，谢谢！）

.main {
  display: flex;
  /* width: 100%; */
position: relative;
}

main > img {
position: absolute
}

.main-image__fourth {
  height: 231px;
}
.main-image__first {
  width: 125px;


}
.main-image__third {
  width: 221px;
}

.main-image__fifth {
    width: 257px;
    height: 85px;
    left: -594px;
    top: 503px;
}

.main-image__sixth {
  width: 1183px;
  height: 239px;
      left: -75px;
    top: 53px;
}
 <div class="main">
             <img class="main-image__fourth" src="/src/img/4.png" alt="">
            <img class="main-image__first" src="/src/img/1.png" alt="">
            <img class="main-image__third" src="/src/img/3.png" alt="">
            <img class="main-image__fifth" src="/src/img/5.png" alt="">
            <img class="main-image__sixth" src="/src/img/6.png" alt="">
          
          </div>

css вёрстка

1 个回答

  1. Best Answer

    在大多数情况下，它仍然取决于布局、它是什么、什么功能以及如何动画化。在一般情况下，可能通过 JS 进行动画处理就可以了，然后通过position: absolute它进行定位可能就可以了。

    为了在调整大小时不移动，请使用相对单位，例如，在示例中，百分比无处不在。

    @keyframes vertical {
  0% {transform: translateY(20%)}
  100% {transform: translateY(-20%)}
}

@keyframes horizontal {
  0% {transform: translateX(20%)}
  100% {transform: translateX(-20%)}
}

@keyframes diagonal {
  0% {transform: translate(30%, 30%)}
  100% {transform: translate(-30%, -30%)}
}


.blocks {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 50%;
  aspect-ratio: 1;
  background-color: #ccc;
  position: relative;
}

.block {
  width: 20%;
  height: 20%;
  position: absolute;
  opacity: .7;
}

.block_cyan {
  background-color: cyan;
  top: 0;
  left: 0;
}

.block_magenta {
  background-color: magenta;
  bottom: 5%;
  left: 5%;
}

.block_yellow {
  background-color: yellow;
  top: 10%;
  right: 10%;
  animation: diagonal 1s infinite alternate ease-in-out;

}

.block_black {
  background-color: black;
  top: 35%;
  right: 10%;
  animation: horizontal 1s infinite alternate ease-in-out;

}

.block_white {
  background-color: white;
  top: 45%;
  right: 0;
  width: 60%;
  animation: vertical 1.5s infinite alternate ease-in-out;
}
    <ul class="blocks">
  <li class="block block_cyan"></li>
  <li class="block block_magenta"></li>
  <li class="block block_yellow"></li>
  <li class="block block_black"></li>
  <li class="block block_white"></li>
</ul>

    • 1

相关问题