How do you make div the same width in line if there's deviations?



  • If there's no backup, it's just enough to make the percentage and everything great, all the blocks to the line, but what if there's a gap between div?

    Example: CSS

       .wide{
           width: 100%; 
           background: yellow;
        }
    
    *{ box-sizing: border-box; }
    
    .someContent{ 
      float: left;
      width: 25%; height: 50px;
      background: gray;
      border: 2px solid black; 
    }
    
    .wrapper{ 
      margin-left: auto;
      margin-right: auto;  
      width: 70%;
      border: 2px dotted green;
    }
    
        .wrapper::after{
          content:"";
          clear: both;
          display: table;  
        }
    

    HTML

    <div class="wide">
    <div class="wrapper">
    <div class="someContent">Контент</div>
    <div class="someContent">Контент</div>
    <div class="someContent">Контент</div>
    <div class="someContent">Контент</div>
    </div>
    </div>

    If, in this example, the width of a percentage of the .someContent, the last block will be moved.

    How do we proceed with the derogations between the blocks so that the line and the relative same width of each block are maintained?



  • As a percentage, try:

    .someContent{ 
      width: 23%;
      margin: 0 1%;
    }
    

    DEMO https://jsfiddle.net/mg9wh3oa/




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2