正如标题中所描述的:假设我有一个给定的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)。
任何建议......
答案 0 :(得分:1)
如果您需要保持相同的HTML结构,可以从position:absolute
课程中删除.child
。
属性display: block
会将您的元素显示为一个块,这样您就可以将它们放在另一个下面。
有关display
财产的更多信息,请访问:
http://www.w3schools.com/cssref/pr_class_display.asp
您还可以考虑其他解决方案,但在我看来,从代码中删除position: absolute
是最简单直接的。其他一些想法可能是:
.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;
答案 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/。
希望这有帮助