HTML과 CSS에서 Div 요소를 나란히 정렬하는 방법은 무엇입니까?

정렬 요소를 나란히 배치

여러 가지 방법으로 정렬할 수 있습니다. float: left…

정렬하는 방법에는 여러 가지가 있습니다. 요소를 나란히 배치합니다. 다음은 두 요소를 나란히 달성하는 가장 일반적인 방법입니다…

데모: Codepen

에서 아래 예제를 모두 보고 편집하세요. 🎜>

---

모든 예제의 기본 스타일 아래…

이 예제의 상위 및 하위 요소에 대한 일부 기본 CSS 스타일:

.parent {<p> 배경: 중간 보라색;<br> 패딩: 1rem;<br>}<br>.child {<br> 테두리: 1px 단색 남색;<br> 패딩: 1rem;<br>}<br>

---

float 사용 : 와 함께 떠났다 주의

float 솔루션을 사용하면 다른 요소에 의도하지 않은 영향을 미칠 수 있습니다. (힌트: 클리어픽스를 사용해야 할 수도 있습니다.)

html

<div> <div 클래스 ='child float-left-child'>A</div><p> <div></div><br>

css

 부동 소수점: left;<p>}<br>

---

디스플레이 사용: inline-block은 간단

html

<div> <div class='child inline-block-child'>A&lt ;/div><p> <div></div><br>

css

 표시: inline-block;<p>}<br>

---

display: 인라인 블록 및 사이 공간 제거 divs

참고: div 태그 사이의 공백을 제거하여 두 하위 요소 사이의 공백을 제거할 수 있습니다.

html

<div> <div class='child inline-block-child'>A&lt ;/div><div class="자식 inline-block-child"></div><br>

css

 표시: inline-block;<p>}<br>

---

display: flex가 좋습니다 선택

html

<div> <div class='child flex-child'>A</ div><p> <div></div><br>

css

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

---

display: inline-flex는 display: flex와 유사하지만 인라인

html

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

css

 표시: inline-flex;<br>}<br>

---

디스플레이: 그리드를 사용하면 레이아웃

html

<div> <div class='child'>A</div><br> <div></div><br>

css

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

---

로그인 후 복사