Question

我有一组div左右移动，就像一个楼梯。也许有更好的方法，但我得到了它。

现在我想围绕所有这些“楼梯”。这样的事情：

请注意，这些楼梯在页面的中间（水平）开始。如何根据这些楼梯数制作这个外部div而无需输入高度和宽度？

另一个重要的注意事项是，有时只有4个步骤，这意味着outter div必须根据显示的div进行调整。

如果你想查看它，你有一个小的plunker：

这是带有上述“楼梯”的css样式表

.box1 {
  text-align: center;
  border: 1px solid #eaeaea;
  border-radius: 2px;
  margin-left: 30%;
  width: 8%;
  height: 40px;
}

.box2 {
  text-align: center;
  margin-left: 38%;
  border: 1px solid #eaeaea;
  border-radius: 2px;
  width: 8%;
  height: 40px;
}

.box3 {
  text-align: center;
  margin-left: 46%;
  border: 1px solid #eaeaea;
  border-radius: 2px;
  width: 8%;
  height: 40px;
}

.box4 {
  text-align: center;
  margin-left: 54%;
  border: 1px solid #eaeaea;
  border-radius: 2px;
  width: 8%;
  height: 40px;
}

.box5 {
  text-align: center;
  margin-left: 62%;
  border: 1px solid #eaeaea;
  border-radius: 2px;
  width: 8%;
  height: 40px;
}

.box6 {
  text-align: center;
  margin-left: 70%;
  border: 1px solid #eaeaea;
  border-radius: 2px;
  width: 8%;
  height: 40px;
}

<div class="boxContainer">
  <div class="row box1">
    hello 1
  </div>
  <div class="row box2">
    hello 2
  </div>
  <div class="row box3">
    hello 3
  </div>
  <div class="row box4">
    hello 4
  </div>
  <div class="row box5">
    hello 5
  </div>
  <div class="row box6">
    hello 6
  </div>
</div>

Answer 1

我不知道我是否完全理解你的问题。你的意思是这样的吗？

* {
  box-sizing: border-box;
}

.boxContainer {
  border-radius: 5px;
  border: 3px solid black;
  padding: 5px 5px 5px 30px; /* Approach to OP's image */
  --steps: 6;
}

.box {
  --size: calc(100% / var(--steps));
  border: 1px solid black;
  width: var(--size);
  height: 40px;
  text-align: center;
  position: relative;

}

.box:nth-child(2) {
  left: var(--size);
}

.box:nth-child(3) {
  left: calc(2 * var(--size));
}

.box:nth-child(4) {
  left: calc(3 * var(--size));
}

.box:nth-child(5) {
  left: calc(4 * var(--size));
}

.box:nth-child(6) {
  left: calc(5 * var(--size));
}

<div class="boxContainer">
  <div class="row box">
    hello 1
  </div>
  <div class="row box">
    hello 2
  </div>
  <div class="row box">
    hello 3
  </div>
  <div class="row box">
    hello 4
  </div>
  <div class="row box">
    hello 5
  </div>
  <div class="row box">
    hello 6
  </div>
</div>

我使用了Custom Property（a.k.a. CSS变量）--steps，因此您可以定义boxContainer中的步数。

这样，如果容器内只有4个盒子，你可以内联覆盖这个变量，如：

<div class="boxContainer" style="--steps: 4">

如果CSS没有任何其他更改，一切都会适合。

您可以使用JS进行此更改，或者，如果您使用某种服务器端语言来生成标记，则更容易......例如用PHP：

<?php $boxes = ['hello 1', 'hello 2', 'hello 3', 'hello 4']; ?>
<div class="boxContainer" style="--steps: <?= count($boxes) ?>">
<?php foreach ($boxes as $box): ?>
    <div class="row box"><?= $box ?></div>
<?php endforeach ?>
</div>

Answer 2

它有点混乱，但你可以试试这个：

＆＃13;

.row {
  border: 1px solid black;
  width: 80px;
  height: 25px;
  position: absolute;
  left: 100%;
  top: 100%;
}

.boxContainer {
  position: relative;
  display: inline-block;
}

.wrapper {
  position: relative;
}

＆＃13;

<div class="boxContainer">
    <div class="row box1">
      <div class="wrapper">
        hello 1
      </div>
      <div class="row">
          <div class="wrapper">
            hello 2
          </div>
          <div class="row">
            <div class="wrapper">
              hello 3
            </div>
              <div class="row">
                <div class="wrapper">
                  hello 4
                </div>
              </div>
          </div>
      </div>
    </div>
</div>

＆＃13;

这与位置绝对和相对的方式起作用。

Answer 3

你可以试试这个：

.boxContainer{
  border: solid 2px #000;
  border-radius: 8px;
  padding: 10px;
}

.box1 {
  text-align: center;
  border: 1px solid #eaeaea;
  border-radius: 2px;
  margin-left: 30%;
  width: 8%;
  height: 40px;
}

.box2 {
  text-align: center;
  margin-left: 38%;
  border: 1px solid #eaeaea;
  border-radius: 2px;
  width: 8%;
  height: 40px;
}

.box3 {
  text-align: center;
  margin-left: 46%;
  border: 1px solid #eaeaea;
  border-radius: 2px;
  width: 8%;
  height: 40px;
}

.box4 {
  text-align: center;
  margin-left: 54%;
  border: 1px solid #eaeaea;
  border-radius: 2px;
  width: 8%;
  height: 40px;
}

.box5 {
  text-align: center;
  margin-left: 62%;
  border: 1px solid #eaeaea;
  border-radius: 2px;
  width: 8%;
  height: 40px;
}

.box6 {
  text-align: center;
  margin-left: 70%;
  border: 1px solid #eaeaea;
  border-radius: 2px;
  width: 8%;
  height: 40px;
}

<div class="boxContainer">
  <div class="row box1">
    hello 1
  </div>
  <div class="row box2">
    hello 2
  </div>
  <div class="row box3">
    hello 3
  </div>
  <div class="row box4">
    hello 4
  </div>
  <div class="row box5">
    hello 5
  </div>
  <div class="row box6">
    hello 6
  </div>
</div>

根据内部div调整div

3 个答案: