margin-top也適用于兄弟元素-有解無憂

我正在為我的網站創建一個關于頁面。我有一個名為的父元素maindiv，一個有兩個孩子的 flexbox，一個是leftcont，另一個是rightcont。我想使用 margin-top to 創建一個影片leftcont。但是當我這樣做時，影片也被應用到它的兄弟（rightcont） div 上，這也是我不想要的

你能幫我做同樣的事情嗎？這是代碼：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .imganim {
        margin-bottom: 10px;
        border: 2px solid red;
        transition: 2s;
      }

      .maindiv {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
      }

      .leftcont {
        width: 50%;
        border: 2px solid red;
      }

      .rightcont {
        width: 50%;
        animation: none;
        border: 2px solid black;
        margin-top: 0 !important;
      }

      .marginanim {
        animation: margin 2.4s infinite;
      }

      @keyframes margin {
        0% {
          margin-top: 0;
        }

        50% {
          margin-top: 10px;
        }

        100% {
          margin-top: 0;
        }
      }
    </style>
  </head>

  <body>
    <div class="maindiv">
      <div class="leftcont marginanim">
        <img
          src="https://solutionfest.netlify.app/static/media/vector8.5596c5d75a5f1c4454c0.jpg"
          alt=""
        />
      </div>
      <div class="rightcont">
        <h2>Aboutme</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi,
          obcaecati similique? Eligendi sint, laborum aspernatur, temporibus
          consequuntur ipsa officiis, praesentium distinctio necessitatibus sed
          debitis eius facilis molestiae. Consectetur laboriosam veritatis quis
          perspiciatis ab quae sunt nam itaque veniam mollitia obcaecati non
          minima molestias illo cum, ducimus soluta modi inventore consequuntur.
        </p>
      </div>
    </div>
  </body>
</html>

uj5u.com熱心網友回復：

margin-top還會更改父級的大小，這也會影響rightcont. 如果您使用transform: translateY屬性，則父級不會注意到移動并且您會得到您正在尋找的效果。

* {
  margin: 0;
  padding: 0;
}

.imganim {
  margin-bottom: 10px;
  border: 2px solid red;
  transition: 2s;
}

.maindiv {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.leftcont {
  width: 50%;
  border: 2px solid red;
  
  z-index:0;
}

.rightcont {
  width: 50%;
  animation: none;
  border: 2px solid black;
  margin-top: 0 !important;
  
  z-index:1;
}

.marginanim {
  animation: margin 2.4s infinite;
}

@keyframes margin {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0px);
  }
}

<div class="maindiv">
  <div class="leftcont marginanim">
    <img src="https://solutionfest.netlify.app/static/media/vector8.5596c5d75a5f1c4454c0.jpg" alt="">
  </div>
  <div class="rightcont">
    <h2>Aboutme</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, obcaecati similique? Eligendi sint, laborum aspernatur, temporibus consequuntur ipsa officiis, praesentium distinctio necessitatibus sed debitis eius facilis molestiae. Consectetur laboriosam
      veritatis quis perspiciatis ab quae sunt nam itaque veniam mollitia obcaecati non minima molestias illo cum, ducimus soluta modi inventore consequuntur.
    </p>
  </div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/477051.html

標籤：html css 动画片 CSS动画利润

上一篇：Three.js-在沒有攝像頭的情況下獲取螢屏位置

下一篇：SwiftUI-過渡影片錯誤（已解決：不是錯誤！）