How to Create a Fluid Square Layout with CSS Using a Dummy Element?

Creating a Fluid Layout with Height Equal to Width

In CSS, it's possible to dynamically set an element's height to be the same as its width, creating a square-shaped aspect ratio. To achieve this, we utilize a clever technique known as the "dummy element" method.

Steps:

1. Define a container div element with display: inline-block and position: relative.
2. Create a "dummy" element within the container with a margin-top equal to 75%. This establishes a 4:3 aspect ratio.
3. Position an absolute element within the container (#element), which will fill the height and width of the container.

Example:

#container {
  display: inline-block;
  position: relative;
  width: 50%;
}

#dummy {
  margin-top: 75%;
}

#element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: silver;
}

<div>

Result:

This technique effectively creates a fluid layout where the height of the #element div adjusts dynamically based on the specified width of the #container div. As you resize the container, the element maintains its square proportions.

The above is the detailed content of How to Create a Fluid Square Layout with CSS Using a Dummy Element?. For more information, please follow other related articles on the PHP Chinese website!