html - How to make inline-block elements to grow vertically -
I have two inline block elements (the first image) first fixed a width. The second does not have fixed width because the container can grow horizontally, so it should be filled.
When the second element is bigger (second image) then it wraps down.
But what do I need to do is to grow the element (third image) vertically.
I also need text to protect line breaks.
you See this JSFiddle for a work example: Support calc () For a table of browsers see this link: max-width: calc (100% - LABEL_WIDTH) Can apply to
.element class. Change the label's width to LABEL_WIDTH. In this way you can define the width for labels instead of using two percent values.
li {Display: inline -block; Vertical-alignment: top; List-style-type: none; } .label {width: 7em; } .element {width: calc (100% - 7em); White-space: pre-line; }
Comments
Post a Comment