Is it possible on pure HTML and CSS to ensure that the blocks have the same width inside the parent, but stretch / taper as the parent block stretches / narrows?

enter image description here

In other words, the width of each of the n blocks inside the container, excluding tailings, is equal to ParentWidth/n for any widths of the Parent Width parent.

If this is not possible in pure HTML and CSS - just answer and close this question; JS solutions are not required yet.

  • do you want a table tag - Grundy
  • one
    display: flex / table - table-cell - Artem Gorlachev

2 answers 2

option with display: table

+

table-layout: fixed - the table is divided into columns of equal width. For this value to work correctly, the width of the table must be specified.

 *{ padding: 0; margin: 0; box-sizing: border-box; } .b{ display: table; width: 100%; table-layout: fixed; height: 150px; } .b-item{ display: table-cell; vertical-align: top; border: 2px solid #ccc; } 
 <div class="b"> <div class="b-item">Π”Ρ€ΡƒΠ³ΠΈΠΌΠΈ словами, ΡˆΠΈΡ€ΠΈΠ½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· n Π±Π»ΠΎΠΊΠΎΠ² Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° Π±Π΅Π· ΡƒΡ‡Ρ‘Ρ‚Π° отсупов Ρ€Π°Π²Π½Π° ParentWidth/n для Π»ΡŽΠ±Ρ‹Ρ… ΡˆΠΈΡ€ΠΈΠ½ родитСля Parent Width.</div> <div class="b-item">Π”Ρ€ΡƒΠ³ΠΈΠΌΠΈ словами, ΡˆΠΈΡ€ΠΈΠ½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· n Π±Π»ΠΎΠΊΠΎΠ² Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° Π±Π΅Π· ΡƒΡ‡Ρ‘Ρ‚Π° отсупов Ρ€Π°Π²Π½Π° ParentWidth/n для Π»ΡŽΠ±Ρ‹Ρ… ΡˆΠΈΡ€ΠΈΠ½ родитСля Parent Width.Π”Ρ€ΡƒΠ³ΠΈΠΌΠΈ словами, ΡˆΠΈΡ€ΠΈΠ½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· n Π±Π»ΠΎΠΊΠΎΠ² Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° Π±Π΅Π· ΡƒΡ‡Ρ‘Ρ‚Π° отсупов Ρ€Π°Π²Π½Π° ParentWidth/n для Π»ΡŽΠ±Ρ‹Ρ… ΡˆΠΈΡ€ΠΈΠ½ родитСля Parent Width.</div> <div class="b-item">Π”Ρ€ΡƒΠ³ΠΈΠΌΠΈ словами, ΡˆΠΈΡ€ΠΈΠ½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· n Π±Π»ΠΎΠΊΠΎΠ² Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° Π±Π΅Π· ΡƒΡ‡Ρ‘Ρ‚Π° отсупов Ρ€Π°Π²Π½Π° ParentWidth/n для Π»ΡŽΠ±Ρ‹Ρ… ΡˆΠΈΡ€ΠΈΠ½ родитСля Parent Width. Π”Ρ€ΡƒΠ³ΠΈΠΌΠΈ словами, ΡˆΠΈΡ€ΠΈΠ½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· n Π±Π»ΠΎΠΊΠΎΠ² Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° Π±Π΅Π· ΡƒΡ‡Ρ‘Ρ‚Π° отсупов Ρ€Π°Π²Π½Π° ParentWidth/n для Π»ΡŽΠ±Ρ‹Ρ… ΡˆΠΈΡ€ΠΈΠ½ родитСля Parent Width. Π”Ρ€ΡƒΠ³ΠΈΠΌΠΈ словами, ΡˆΠΈΡ€ΠΈΠ½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· n Π±Π»ΠΎΠΊΠΎΠ² Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° Π±Π΅Π· ΡƒΡ‡Ρ‘Ρ‚Π° отсупов Ρ€Π°Π²Π½Π° ParentWidth/n для Π»ΡŽΠ±Ρ‹Ρ… ΡˆΠΈΡ€ΠΈΠ½ родитСля Parent Width.</div> </div>

    One option is to set the width in percent for the internal blocks and arrange the columns in a row using float: left .

    For example:

     .container { width: 100%; } .column { float: left; padding: 0 10px; width: 33.33%; }
    • So in the problem of n blocks and not 3 - Artem Gorlachev
    • one
      @ArtemGorlachev, for n, `.column {width: 100% / n; } ` - HamSter