HTML과 CSS를 사용하여 DIV 요소를 나란히 정렬하려면 어떻게 해야 합니까?

정렬 요소를 나란히

요소를 HTML 및 CSS와 나란히 정렬하는 과정에서 가장 악명 높은 접근 방식은 float: left이지만 이것이 유일한 방법은 아닙니다.< /p>

다음은 병렬 정렬을 달성하기 위한 다양한 기술입니다. 더욱 혁신적입니다.

---

Float

float 사용: 왼쪽 또는 오른쪽이 한 가지 방법입니다. . 그러나 다른 요소의 레이아웃에 영향을 미칠 수 있으므로 주의하세요.

HTML

<div><br> <div> < div class="float-left">B</div><br></div><br>

CSS

.float-left {<br> float : 왼쪽;<br>}<br>

---

인라인 디스플레이

디스플레이 : inline-block을 사용하면 요소 사이에 공백이 나타날 수 있지만 레이아웃에 영향을 주지 않고 요소를 나란히 배치할 수 있습니다. .

HTML

<div><br> <div> <div class="inline-block">B</div><br></div><br>

CSS

.inline-block {<br> 디스플레이 : inline-block;<br>}<br>

인라인 블록 요소 사이의 공백을 없애려면 HTML 사이의 공백을 제거하세요. 태그.

---

Flexbox

Flexbox는 강력한 레이아웃 기능을 갖추고 있어 쉽게 요소 정렬 가로로.

HTML

<div> <div class="flex-child">A</div><br> <div></div><br>

CSS

.flex-parent {<br> 디스플레이: flex;<br>}<br>.flex- 어린이 {<br> 플렉스: 1;<br>}<br>

---

인라인 Flexbox

인라인 Flexbox는 인라인 내에서 요소를 나란히 배치하는 데 유용합니다. content.

HTML

<div> <div>A</div>
<br> <div>B</div> <br></div><br>

CSS

.inline-flex-parent {<br> 디스플레이: inline-flex;<br>}<br>

---

CSS 그리드

HTML

<div> <div>A</div><br> <div>B</div><br></div><br>

CSS

.grid-parent {<br> 디스플레이: 그리드;<br> 그리드 템플릿 열: 1fr 1단;<br>}<br>