How to Achieve Horizontal Div Alignment in CSS?

Horizontal Div Alignment in CSS

When working with CSS, aligning divs horizontally within a container can present a challenge. By default, floated divs will stack vertically if their combined width exceeds the parent container's width, even if the container's height permits horizontal arrangement.

To achieve the desired horizontal alignment, we can utilize an inner div within the container that is sufficiently wide to accommodate all the floated divs.

#container {
  background-color: red;
  overflow: hidden;
  width: 200px;
}

#inner {
  overflow: hidden;
  width: 2000px;
}

.child {
  float: left;
  background-color: blue;
  width: 50px;
  height: 50px;
}

<div>

In this solution, the #inner div has a width greater than the combined width of the floated #child divs. Therefore, all the floated divs align horizontally within the #container div, resulting in the desired layout.

The above is the detailed content of How to Achieve Horizontal Div Alignment in CSS?. For more information, please follow other related articles on the PHP Chinese website!