As inline elements to make the same height of the parent?

There is a block where the inline blocks. Which assume different count words text of, respectively, the height of the blocks varies. How to make regardless of the text blocks were the same height.

Here's an example: https://jsfiddle.net/nt1v6e0h/
June 10th 19 at 16:29
4 answers
June 10th 19 at 16:31
Solution
Here is the solution with the transition from inline to flex. https://jsfiddle.net/yggnswa5/
Thank you, I know that the Flex is can be done, but I would like to do it on inline ) maybe I'm behind the times, I would like to know is it possible to do so or resort to js all the same - antonina_Aufderhar87 commented on June 10th 19 at 16:34
why in 2017 to impose blocks on inline? flex even on IE 11 feels.
You can even offer a trick https://jsfiddle.net/yrk7z4v0/. But I would use the flex - Lenny.Botsfo commented on June 10th 19 at 16:37
Cleverly , but I think it's just my pen, it is necessary also to Flex to get used to. Such a question, slightly off topic, why in my example with width:33%; blocks to jump to another line, and with a width:30%; standards. It is a glitch editor or what? ) - antonina_Aufderhar87 commented on June 10th 19 at 16:40
Not rebuilt must:
1. for the blocks you need to addfloat: left;
2. globally for all elements box-sizing: border-box;
3. more or less the exact value of one third in css 33.33333%;
4. for conainer to use a clearfix:
main::after {
 display: block;
 content: "";
 clear: both;
 }

5. to simulate marginal border: 2px transparent; and backgorund-clip: padding-box;

Don't be afraid of flex, now all commercial development on it.
And IE below 11 version more not used. - Lenny.Botsfo commented on June 10th 19 at 16:43
OK , ie for inline - blocks 33.3% not only works for float: left; , like always worked, or am I mistaken? ) - antonina_Aufderhar87 commented on June 10th 19 at 16:46
the browser, the line breaks between the inline elements, whitespace replace. Because of gaps elements and rebuilt.
To work without the float: left; have any line breaks between the elements to remove
<div class="into">...</div><div class="into">...</div><div class="into">...</div>

or hack review to use:
<div class="into">Natural semiprecious insert</div><!--
--><div class="into">Biogenic insert</div><!--
--><div class="into">Biogenic insert</div>

either specify font-size: 0; to container the main and the normal size for children. - Lenny.Botsfo commented on June 10th 19 at 16:49
Hm, interesting, didn't know ) - antonina_Aufderhar87 commented on June 10th 19 at 16:52
June 10th 19 at 16:33
Solution
You can simulate a table - to make the container display: tableand child elements - table-cell. And by the way you have not an inline elements, and inline-block.
tell me, in this case, as the spacing between elements ask? here the margin does not work anymore ) - antonina_Aufderhar87 commented on June 10th 19 at 16:36
, border-spacing on the container, the principle of operation is similar to margin. But if you only need padding between elements, it is again about flexbox. - Lenny.Botsfo commented on June 10th 19 at 16:39
yeah thanks already found , just first to the cell is applied not looked ) - antonina_Aufderhar87 commented on June 10th 19 at 16:42
June 10th 19 at 16:35
Solution
of course, but I think it's time to get used to the Flex ) - antonina_Aufderhar87 commented on June 10th 19 at 16:38
June 10th 19 at 16:37
Use better for this flex, and for browsers which don't support IE9, etc Yaroslav.

Find more questions by tags CSS