Hi everyone, I ran into a problem, there is a make-up, 3 divas, 1 of them is overflow: hidden, because of which the baseline of the container is traveling. How to align the blocks in one line? Sample layout added here: https://jsfiddle.net/ap11fxod/1/

.a { height: 29px; width: 500px; background: #f231ad; line-height: 29px; padding: 0 10px; } .a > div { display: inline-block; } .b { overflow: hidden; max-width: 370px; white-space: nowrap; font-size: 18px; color: #FFF; } .c { font-size: 14px; padding: 0 5px; } .d { font-size: 12px; padding: 0 5px; } 
 <div class='a'> <div class='b'> БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ </div> <div class='c'> Текст 1 </div> <div class='d'> Текст 2 </div> </div>

  • At least not semantically to write the text in divas, make a markup for the beginning of norms ... - Ivan Karaman
  • .a > div { display: inline-block; } .a > div { display: inline-block; } take the inline block and set the float: left; - Ivan Karaman

2 answers 2

It's simple.

 .a { display: flex; } 

 .a { height: 29px; width: 500px; background: #f231ad; line-height: 29px; padding: 0 10px; display: flex; } .a > div { display: inline-block; } .b { overflow: hidden; max-width: 370px; white-space: nowrap; font-size: 18px; color: #FFF; } .c { font-size: 14px; padding: 0 5px; } .d { font-size: 12px; padding: 0 5px; } 
 <div class='a'> <div class='b'> БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ </div> <div class='c'> Текст 1 </div> <div class='d'> Текст 2 </div> </div>

    As an option - add vertical-align to the internal blocks:

     .a > div { display: inline-block; vertical-align: bottom; }

    bottom can be replaced with something else at will. Blocks with the inline-block property using vertical-align aligned in a line relative to each other in height with their borders.