Question

如果没有JavaScript，是否有可能创建一个流动的阶梯级联元素？

含义：

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

等等任何数量的元素。

我正在使用这样的标记：

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

通过流动，我的意思是我在步骤中有多少元素并不重要，它只会起作用 - 所以没有每个元素的绝对定位，或者每个元素都有逐渐增加的余量（除非那里有＆＃39） ;某些方法可以永久地用css我不知道）。

此外，没有无限的子元素 - 一个可接受的解决方案可以在必要时混合使用更多元素，但这些框不应该是彼此的子元素。

固定尺寸可以，但首选灵活。

我确实有pen going here，但还没有成功。

Answer 1

感谢@Banzay的链接，我使用浮动的子元素进行了解决，并在内容中添加了另一层包含作为内联块元素。

＆＃13;

*{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;
}

＆＃13;

<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>

＆＃13;

Answer 2

以下是您可以调整HTML的想法：

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 3

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

当然，如果你能做到这一点，它确实提出了一个问题，为什么不只是使用你的脚本语言来设置margin-left: ${incrementor} * indent内联。

我确实试图利用CSS计数器，但遗憾的是calc不支持使用计数器

＆＃34;阶梯＆＃34; CSS

3 个答案: