代码之家 › 专栏 › 技术社区 › Randy Hall

带CSS的“阶梯式”同级元素

css html

Randy Hall · 技术社区 · 6 年前

如果没有javascript,是否可以创建一个流动的阶梯级元素层叠?

含义:

[1]
   [2]
      [3]
         [.]

对于任意数量的元素,依此类推。

我正在处理标记,如下所示:

<div id="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

通过流动,我的意思是不管我在步骤中有多少个元素,它都会起作用-所以没有每个元素的绝对定位,或者使每个元素都有逐渐增加的利润(除非在我不知道的CSS中有某种方法可以永久这样做)。

此外,没有无限的子元素——一个可接受的解决方案可以在必要时将更多的元素混合在一起,但框不应该是彼此的子元素。

固定尺寸也可以,但最好是灵活的。

我有一个 pen going here 但是还没有成功。

3 回复 | 直到 6 年前

Randy Hall 6 年前

多亏了@banzay的链接,我使用了一个浮动的子元素来计算它,并将内容的另一层包含添加为一个内联块元素。

*{border-width:0;margin:0;padding:0;box-sizing:border-box;}

#con{
  margin:50px;
  background:#acc;
}
#con>div{
  position:relative;
  background:#ccd;
  height:50px;
}
#con>div:before {
    float: left;
    content: "\00a0";
    width: 50px;
    height: 51px;
}
#con>div>div{
  display:inline-block;
  height:50px;
  width:50px;
  background:#000;
  color:#fff;
}

<div id="con">
  <div><div>1</div></div>
  <div><div>2</div></div>
  <div><div>3</div></div>  
  <div><div>4</div></div>  
  <div><div>5</div></div>  
</div>

-1

Temani Afif 6 年前

如果您可以调整HTML,下面是一个建议:

^{我知道,它依赖于嵌套元素,而不是兄弟元素}

.container {
 position:relative;
 width:20px;
 height:20px;
}

.container  div{
  position:absolute;
  width:20px;
  height:20px;
  border:1px solid;
  left:100%;
  top:100%;
}

.container  div.bigger {
  width:100px;
}
.container  div.taller {
  height:50px;
}

<div class="container">
    <div>1
      <div class="taller">2
        <div>3
          <div class="bigger">4
            <div>5</div>
                    </div>
                     </div>
                      </div>
                        </div>
</div>

-1

Scoots 6 年前

假设这是动态生成的HTML,您可以利用服务器端语言设置变量,并将它们与 calc 在您的CSS中的函数。

div {
	margin-top: 5px;
	border: 1px solid #d0d0d0;
	height: 25px;
	background-color: #e0e0e0;
	
	/* This is the important line */
	margin-left: calc(var(--indent) * 15px);
}

<div style="--indent: 0;"></div>
<div style="--indent: 1;"></div>
<div style="--indent: 2;"></div>
<div style="--indent: 3;"></div>
<div style="--indent: 4;"></div>
<div style="--indent: 5;"></div>
<div style="--indent: 6;"></div>
<div style="--indent: 7;"></div>
<div style="--indent: 8;"></div>
<div style="--indent: 9;"></div>
<div style="--indent: 10;"></div>
<div style="--indent: 11;"></div>
<div style="--indent: 12;"></div>
<div style="--indent: 13;"></div>
<div style="--indent: 14;"></div>
<div style="--indent: 15;"></div>
<div style="--indent: 16;"></div>
<div style="--indent: 17;"></div>
<div style="--indent: 18;"></div>
<div style="--indent: 19;"></div>

当然,如果你能做到这一点,那就需要问一个问题:为什么不使用脚本语言来设置 margin-left: ${incrementor} * indent 内联。

我确实试过利用CSS计数器,但很遗憾 钙 尚不支持使用计数器