Implementation of CSS equal division of parent container (perfect thirds)

The width of the parent container is fixed. In order to achieve that the child elements perfectly divide the parent width in equal proportion, what are the ways to achieve it?

HTML part of the code:

Method 1: Floating layout + percentage

(Float the sub-elements to the left one by one, and set the width percentage of each sub-element according to the number of sub-elements)

Method 2: Inline-block + percentage

Method 3: Parent element display:table + child element display:table-cell

Method 4: css3 display:flex; (flex layout)

Method 5: Grid system (bootstrap)

Add the class attribute class=“col-md-3” to the child element

The above five methods can all achieve the equal division of the parent element container into three equal parts, but the first two methods based on percentages cannot achieve perfect division into three equal parts, because the percentage is an inaccurate estimate, and if the child element has a border, it is difficult to divide it equally.

The last three methods are preferred

This is the end of this article about the implementation of CSS proportional division of parent containers (perfect thirds). For more relevant CSS proportional division of parent containers content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!