How to Achieve Equal Auto Widths for Side-by-Side DIVs in CSS?

Achieving Equal Auto Widths for Side-by-Side DIVs in CSS

You have an HTML parent DIV containing multiple child DIVs, and you want the child DIVs to automatically take equal widths. Below is a solution that achieves this using the display: table property:

#wrapper {
    display: table;
    table-layout: fixed;
    width: 90%;
    height: 100px;
    background-color: Gray;
}

#wrapper div {
    display: table-cell;
    height: 100px;
}

The display: table property for the parent DIV sets up a table-like structure. The table-layout: fixed property ensures that the columns (i.e., child DIVs) have fixed widths. The display: table-cell property for the child DIVs places them within the "cells" of the table.

This solution works effectively in modern browsers except for IE7. Here are some examples:

• Three DIVs: https://jsfiddle.net/g4dGz/
• Two DIVs: https://jsfiddle.net/g4dGz/1/

The above is the detailed content of How to Achieve Equal Auto Widths for Side-by-Side DIVs in CSS?. For more information, please follow other related articles on the PHP Chinese website!