본문 바로가기
css

동일한 줄의 왼쪽 정렬 및 오른쪽 정렬 텍스트

by code-box 2021. 9. 22.

일부 텍스트를 왼쪽으로 정렬하고 일부 텍스트를 동일한 줄의 오른쪽으로 정렬하는 것이 유용할 수 있습니다. 예를 들어, 바닥글에서 왼쪽에는 저작권 정보를, 오른쪽에는 웹마스터 정보를 표시할 수 있습니다. HTML을 원하는 방법은 다음과 같습니다.

<div id="textbox">
    <p class="alignleft">Text on the left.</p>
  <p class="alignright">Text on the right.</p>
</div>

그런 다음 CSS 클래스에 텍스트-align: left와 텍스트-align: right의 왼쪽 및 오른쪽 값을 제공하면 각각 원하는 결과에 가까워지지만 새 단락 때문에 오른쪽 정렬 텍스트가 한 줄 아래로 충돌합니다. 대신 문단을 띄우십시오.

.alignleft {
   float: left;
}
.alignright {
   float: right;
}

그런 다음 부동산을 치우는 것을 잊지 마십시오.

<div style="clear: both;"></div>

데모 보기

댓글