divを内部divに従って調整します

Question

階段のように左と右のdivのセットがあります。たぶん、それをするためのよりよい方法がありますが、私はそれを得ました。

今、私はすべてのこれらの "階段"の周りにdivを持っていたいと思います。

これらの階段は、ページの中央（水平方向）に始まります。高さと幅を入力することなく、階段の数に応じてこの外側のdivを作成するにはどうすればよいですか？

もう1つ重要なことは、時にはアウトステップdivが実際に表示されたdivに従って調整する必要があることを意味する4つのステップしかないことです。

あなたがそれをチェックアウトしたい場合はここでは、小さなplunkerを持っている：

PLUNKER

をここで前述した "階段"

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

私はあなたがboxContainerになりますどのように多くの手順を定義することができますCustom Property（別称、CSS変数）--stepsを使用しました。あなたが唯一のコンテナ内で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

とCSSスタイルシートがあります

ちょっと面倒ですが、これを試すことができます：

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

これは道の絶対位置と相対的な作品で演じて。

Answer 3

あなたはこれを試すことがあります。それは、常にどちらか6つのまたは4のdiv

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