将多个绝对定位元素对齐在另一个

时间:2016-06-13 05:53:21

标签: css position alignment less

正如标题中所描述的:假设我有一个给定的HTML结构,并希望通过使用CSS来实现这一点(我的项目中也有LESS,但我对它是全新的)。我可以将元素包装在另一个元素中......但如果可能的话,我宁愿不操纵DOM。

简化标记:

 <div class="mummy">
      <a class="child" href="#">Boo</a>
      <a class="child" href="#">Boo</a>
      <a class="child" href="#">Boo</a>
      <a class="child" href="#">Boo</a>
    </div>

CSS:

.mummy {
      position: relative;
      width: 9em;
      height: 9em;
      background: green;
    }

.child {
  position: absolute;
  top: 0;
  left: 100%;
  display: block;
  width: auto;
  height: 2em;
  background: lightblue;
}

当然元素重叠,因为它们都具有相同的位置。 margin-top似乎是正确的选择,但如何计算呢?

当我使用LESS时,我可以为高度声明一个变量然后说@varHeight*n。但我不知道当前元素的索引(n)。

jsfiddle

任何建议......

2 个答案:

答案 0 :(得分:1)

如果您需要保持相同的HTML结构,可以从position:absolute课程中删除.child

属性display: block会将您的元素显示为一个块,这样您就可以将它们放在另一个下面。

有关display财产的更多信息,请访问: http://www.w3schools.com/cssref/pr_class_display.asp

您还可以考虑其他解决方案,但在我看来,从代码中删除position: absolute是最简单直接的。其他一些想法可能是:

  • Flexbox的
  • 显示:表
  • 的JavaScript

&#13;
&#13;
.mummy {
  position: relative;
  width: 9em;
  height: auto;
  background: green;
}

.child {
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 2em;
  background: lightblue;
  border: 1px solid red;
}
&#13;
<div class="mummy">
  <a class="child" href="#">Boo 1</a>
  <a class="child" href="#">Boo 2</a>
  <a class="child" href="#">Boo 3</a>
  <a class="child" href="#">Boo 4</a>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

在不删除位置的情况下考虑相同的HTML / CSS结构:绝对。假设在任何情况下只有10个子项。看看

的预览
div a:nth-child(2n){margin-top:2em;border:2px solid green;}
div a:nth-child(3n){margin-top:4em;border:2px solid yellow;}
div a:nth-child(4n){margin-top:6em;border:2px solid blue;}
div a:nth-child(5n){margin-top:8em;border:2px solid cyan;}
div a:nth-child(6n){margin-top:10em;border:2px solid black;}
div a:nth-child(7n){margin-top:12em;border:2px solid silver;}
div a:nth-child(8n){margin-top:14em;border:2px solid violet;}
div a:nth-child(9n){margin-top:16em;border:2px solid black;}
div a:nth-child(10n){margin-top:18em;border:2px solid white;}

https://jsfiddle.net/itsselvam/1b3rcjas/

希望这有帮助