Wie kann ich Elemente in HTML und CSS nebeneinander anordnen?

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-Blockanzeige

Ein anderer Weg Um Elemente nebeneinander auszurichten, müssen Sie ihre Anzeigeeigenschaft auf Inline-Block setzen. Dadurch können sie nebeneinander fließen, ähnlich wie Inline-Elemente (z. B. Text oder Bilder).

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 ist ein leistungsstarkes Layoutsystem, das bietet eine flexible und vielseitige Möglichkeit, Elemente auszurichten. Mit Flexbox können Sie festlegen, wie Elemente entlang einer Hauptachse (z. B. horizontal oder vertikal) und einer Querachse (z. B. von links nach rechts oder) angeordnet werden von rechts nach links).

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;
}

Raster

CSS Grid ist ein weiteres Layoutsystem, mit dem Elemente nebeneinander ausgerichtet werden können. Grid bietet ein zweidimensionales Layoutsystem, mit dem Sie Elemente sowohl horizontal als auch vertikal positionieren können.

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;

Das obige ist der detaillierte Inhalt vonWie kann ich Elemente in HTML und CSS nebeneinander anordnen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!