Question

我有不同的行，每行包含徽标和一些文本。我想将每个徽标放在不同的行中，并在它们之间放置一个20px的边距顶部。

的index.html：

<container class="list_project">
      <div class="project">
          <img class ="first_logo" src="./logos/logo.png" value="" />
          <img class ="project_logo" src="./logos/logo.png" value="" />
      </div>
    </container>

的style.css：

  .first_logo 
  {
   position: absolute;
   top: 150px;
   width: 85px;
   height: 45px;
  }
  .project_logo
  {
    position: absolute;
    margin-bottom: 20px;
    width: 85px;
    height: 45px;

   }

但是我发现图像的位置是相对于主页而不是容器。我该如何解决这个问题，并将每个图像相对于容器的位置设置好？

Logo

Answer 1

只需将项目Payload作为亲戚。

div

绝对定位的div寻找第一个亲戚，如果没有定义，则相对于身体。

示例小提琴：https://jsfiddle.net/dabros/vo1npqdx/

Answer 2

如果它们都是固定大小，那就可以了。

HTML：

<container class="list_project">
  <div class="project">
    <img class ="first_logo" src="https://i.stack.imgur.com/OTRXb.png" value="" />
    <img class ="project_logo" src="https://i.stack.imgur.com/OTRXb.png" value="" />
  </div>
</container>

CSS：

.first-logo, 
.project-logo {
  display: block;
  width: 85px;
  height: 45px
}

.first-logo {
    margin-bottom: 20px;
}

如何在容器上的不同div之间加上保证金？

2 个答案: