How to Rearrange Vertical Columns to Horizontal in HTML/CSS?

3-Column Layout in HTML/CSS

Problem:

You have an HTML layout with three columns arranged vertically: left, center, right. You wish to rearrange these columns horizontally using CSS without altering the HTML structure.

Solution:

To achieve a horizontal column arrangement, you can utilize the following CSS properties:

.column-left { float: left; width: 33.333%; }
.column-right { float: right; width: 33.333%; }
.column-center { display: inline-block; width: 33.333%; }

Explanation:

• float: left; aligns the left column to the left edge of its container.
• float: right; aligns the right column to the right edge of its container.
• display: inline-block; places the center column in line with the other columns, eliminating the whitespace that would be present if it were a block-level element.
• The width property sets the width of each column to one-third of the container's width.

Additional Tips:

• For more flexibility, you can create a grid system with multiple columns by assigning the column-* classes (e.g., column-two, column-three).
• Use the column-offset-* classes to apply offsets to columns, allowing you to control the spacing between them.
• Utilize the column-inset-* classes to inset columns within the container, further customizing the layout.

The above is the detailed content of How to Rearrange Vertical Columns to Horizontal in HTML/CSS?. For more information, please follow other related articles on the PHP Chinese website!