Home > Web Front-end > CSS Tutorial > How to Achieve Equal Auto Widths for Side-by-Side DIVs in CSS?

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

Mary-Kate Olsen
Release: 2024-11-13 01:47:02
Original
218 people have browsed it

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;
}
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template