Geek Answers Handbook

Adjust div according to inner divs

I have a set of divs going left and down like a ladder. Maybe there is a better way to do this, but I get it.

Now I would like to have a div around all these "stairs". something like that: IMAGE

Please note that these stairs start from the middle (horizontal) of the page. How can I make this outer div according to the specified number of stairs without having to gain height and width?

Another important point is that sometimes there are only 4 steps, which means that the div should be adjusted according to the displayed div.

Here you have a small plunker if you want to check it out:

Plunker

Here's a css stylesheet with the above "stairs"

.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>
Run codeHide result
+6
3

, . - ?

* {
  box-sizing: border-box;
}

.boxContainer {
  border-radius: 5px;
  border: 3px solid black;
  padding: 5px 5px 5px 30px; /* Approach to OP 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>
Hide result

( CSS) --steps, , boxContainer.

, 4 , inline, :

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

, :

.row {
  border: 1px solid black;
  width: 80px;
  height: 25px;
  position: absolute;
  left: 100%;
  top: 100%;
}

.boxContainer {
  position: relative;
  display: inline-block;
}

.wrapper {
  position: relative;
}
<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>
Hide result

.

+1

:

.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>
Hide result
0

More articles:


All Articles