이미지를 텍스트 오른쪽에 배치하는 방법

이 5 분짜리 자습서에서는

이미지를 텍스트 오른쪽에 뜨는 방법을 배우고 싶습니까? 그렇다면 혼자가 아닙니다. 프로그래머가 웹 페이지의 이미지를 텍스트 내부에 표시하거나 주위를 감싸고있는 텍스트로 표시하려는 경우가 많이 있습니다. 고맙게도 이미지 조작은 텍스트 조작과 비슷하므로 후자에 대한 경험이있는 경우이 과정을 거치지 않아야합니다.

실제로 CSS float 속성을 사용하면 텍스트 오른쪽에 이미지를 떠 다니고 텍스트 가 왼쪽 주위로 흐르게 할 수 있습니다 . 방법을 배우려면 5 분짜리 튜토리얼을 사용하십시오.

시작하기

시작하려면 텍스트 단락을 작성하고 단락 시작 부분에 이미지를 추가하십시오. 이 작업은 텍스트 앞에 있지만

태그 다음에 수행해야합니다.

이 그림은 시간의 경과에 따라 변경 될 수 있습니다. 견해가 뚜렷하지 않은 사람, 배우자와 배우자의 사진. 술 타는 사람은 신트 행사를 제외하고는 운동을하지 말라. Mollit anim id est laborum.

다음으로 이미지에 스타일 속성을 추가하고 float 속성을 적용합니다.

style = "float : right;" />

텍스트가 이미지에 대해 오른쪽 위로 치우치게되므로 이미지에 약간의 여백을 추가하여 읽기 쉽게 만듭니다.

여백 : 0 5px 0 0; "/>

여백 속기 속성은 위쪽, 오른쪽, 아래쪽 및 왼쪽 순서로 여백을 적용합니다 ( TRBL ).

마무리

그리고 그렇게합니다. 이제 이미지를 오른쪽으로 뜨는 것이 전혀 어렵지 않다는 것을 알 수 있습니다. 이미지를 왼쪽으로 뜨고 중앙에 놓아도됩니다. 첫 번째 이동은 가능하지만 안타깝게도 일반적으로 이미지를 가운데로 플로팅 할 수 없습니다. 일반적으로 이미지는 2 열 레이아웃으로 이루어져야합니다.