How Can I Arrange Elements Side by Side in HTML and CSS?

HTML:

<div class="parent">
  <div class="child-left">A</div>
  <div class="child-right">B</div>
</div>

CSS:

.child-left {
  float: left;
}

.child-right {
  float: right;
}

Inline Block Display

Another way to align elements side by side is to set their display property to inline-block. This will allow them to flow alongside each other, much like inline elements (e.g., text or images).

HTML:

<div class="parent">
  <div class="child-left">A</div>
  <div class="child-right">B</div>
</div>

CSS:

.child-left {
  display: inline-block;
}

.child-right {
  display: inline-block;
}

Flexbox

Flexbox is a powerful layout system that provides a flexible and versatile way to align elements. With Flexbox, you can specify how elements are laid out along a main axis (e.g., horizontally or vertically) and a cross axis (e.g., left-to-right or right-to-left).

HTML:

<div class="parent">
  <div class="child-left">A</div>
  <div class="child-right">B</div>
</div>

CSS:

.parent {
  display: flex;
  flex-direction: row;
}

.child-left {
  flex-basis: auto;
}

.child-right {
  flex-basis: auto;
}

Grid

CSS Grid is another layout system that can be used to align elements side by side. Grid provides a two-dimensional layout system, allowing you to position elements both horizontally and vertically.

HTML:

<div class="parent">
  <div class="child-left">A</div>
  <div class="child-right">B</div>
</div>

CSS:

.parent {
  display: grid;
  grid-template-columns: repeat(2, auto);
}

.child-left {
  grid-column: 1 / 2;
}

.child-right {
  grid-column: 2 / 3;

The above is the detailed content of How Can I Arrange Elements Side by Side in HTML and CSS?. For more information, please follow other related articles on the PHP Chinese website!