İç boşluklara göre div ayarlama

Question

Bir merdiven gibi sol ve aşağı giden bir dizi divum var. Belki bunu yapmak için daha iyi bir yol var, ama anladım.

Şimdi bütün bu "merdivenler" etrafında bir div istiyorum. Bunun gibi bir şey:

Bu merdivenlerin sayfada ortada (yatay olarak) başladığına dikkat edin. Boy ve genişliği yazmadan bu merdivenlere göre bu dış divı nasıl yapabilirim?

Diğer önemli bir not, bazen sadece 4 adımın olması, yani div'in gerçekten de görüntülenen divlara göre ayarlanması gerektiği anlamına gelir. İşte

PLUNKER

yukarıda belirtilen "merdiven"

.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

Sorununuzu tam olarak anlayabiliyor muyum bilmiyorum. Bunun gibi bir şey mi demek istiyorsun?

Ben Custom Property (nam-ı diğer CSS değişkeni) kullandım

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

--steps yüzden boxContainer olacak kaç adım tanımlayabilir. Yalnızca kabın içine 4 kutu varsa

Bu şekilde, gibi, bu değişken inline üzerine yazabilirsiniz:

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

Ve her şey CSS başka herhangi bir değişiklik olmadan uyabilecek.

Bu değişikliği yapmak için JS'yi kullanabilir veya biçimlendirmeyi oluşturmak için sunucu tarafında bir dil kullanıyorsanız, daha da kolay ... ör. PHP'de:

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

ile css stil var: Eğer bunu kontrol etmek istiyorsanız Buraya

Eğer küçük plunker var

Bu biraz dağınık, ama şunu deneyebilirsiniz:

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

Bu şekilde mutlak pozisyon ve bağıl çalışmalarıyla oynar.

Answer 3

Bunu denemek olabilir: her zaman 6 veya 4 div'ler

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