How do you put two inline-block under each other without crutches?



  • Two. inline-blockthey need to be placed under each other. Is there a way without crutches and not to rule 'html'? The original code in the inline blocks contains dynamic elements, so the width cannot be applied. 100%

    .a,
    .b {
      display: inline-block;
    }
    .a,
    .b {
      float: left;
    }
    .b {
      clear: left;
    }
    <div class="a">Текст</div>
    <div class="b">Текст</div>



  • You don't have the right approach in principle, either you need to add therapers or at least. <br /> add.

    Add:

    .a,
    .b {
      display: inline-block;
    }
    <div>
        <div class="a">Текст</div>
    </div>
    <div>
        <div class="b">Текст</div>
    </div>

    Add transport:

    .a,
    .b {
      display: inline;
    }
    <div class="a">Текст</div>
    <br /><div class="b">Текст</div>

    Either through pseudos, but only for display: inline;:

    .a,
    .b {
      display: inline;
      white-space:pre; 
    }
    .b:before {
      content: '\00000A';
    }
    <div class="a">Текст</div>
    <div class="b">Текст</div>

    Another option white-space: pre; for the parent, but then all problems and transfers will be taken into account:

    .parent {
      white-space: pre;
    }
    .a,
    .b {
      display: inline-block;
    }
    <div class="parent"><div class="a">Текст</div>
    <div class="b">Текст</div>
    </div>




Suggested Topics

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