이미지 주위에 텍스트를 줄 바꿈하는 코드가 필요합니까? 일반적으로 HTML 페이지를 만들 때 모든 것이 선형으로 흐릅니다. 즉, 바로 다음 블록을 의미합니다. 이전 게시물은 모두 텍스트, 그림, 텍스트 등의 예입니다.
때로는 이미지 대신 텍스트가 아닌 이미지를 포함 할 수 있습니다. 이미지 주위에 텍스트 줄 바꿈이라고합니다. 실제로 HTML을 사용하여 텍스트를 줄 바꿈하는 것은 매우 쉽습니다. 텍스트를 줄 바꾸기 위해 CSS를 사용할 필요는 없습니다.
그러나 요즘 W3C에서는 HTML 대신 CSS를 사용할 것을 권장합니다. 이러한 종류의 작업. 아래의 두 가지 방법을 모두 언급하겠습니다 만 가능한 경우 CSS를 사용하는 것이 반응 형 웹 사이트 디자인에보다 적합하므로 CSS를 사용하는 것이 좋습니다.
HTML을 사용하여 이미지 주위에 텍스트 줄 바꿈
로렘 입소문은 입원 중이며 입원 중일 것입니다. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis는 tincidunt sagittis를 adipiscing했습니다. Cum sociis natque penatibus 및 magnis는 분만 괴물, nascetur ridiculus mus. 알콜 중독에 대한 경고. Curabitur molestie posuere laoreet. 이미지의 오른쪽을 따라 텍스트를 감싸려면 이미지를 왼쪽으로 정렬해야합니다.
3
텍스트를 왼쪽에 표시하고 오른쪽 끝에 이미지를 표시하려면 align 매개 변수를 "right"로 변경하십시오.
로렘 입소문은 입원하고, 입원 중일 것입니다. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis는 tincidunt sagittis를 adipiscing했습니다. Cum sociis natque penatibus 및 magnis는 분만 괴물, nascetur ridiculus mus. 알콜 중독에 대한 경고. Curabitur molestie posuere laoreet. lorem egestas non imperdiet enim congue에있는 유용한 기능들.
<img itemprop="image" data-original="IMAGE URL" align="right" /><p>Your text goes here.</p>
그게 다야! 아주 쉬운 권리? 텍스트와 이미지 사이에 여백이 있도록 여백을 그림에 추가하려면 CSS를 사용하는 것이 좋습니다.
다음은 CSS 스타일 코드입니다 :
<img itemprop="image" data-original=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</p>
위 코드는 MARGIN CSS 요소를 사용하여 이미지의 오른쪽에 10 픽셀의 공백을 추가합니다. 이미지를 왼쪽으로 정렬 했으므로 오른쪽에 공백을 추가하려고합니다.
기본적으로 네 개의 숫자는 TOP RIGHT BOTTOM LEFT를 나타냅니다. 따라서 오른쪽 정렬 된 이미지에 공백을 추가하려면 다음과 같이하십시오.
<img itemprop="image" data-original=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>
따라서이 작업을 수행하는 데 HTML을 사용하는 것이 매우 간단합니다.
CSS를 사용하여 이미지 주위에 텍스트 감싸기
이미지 주위에 텍스트를 감싸는 더 좋은 방법은 CSS를 사용하는 것입니다. 엘리먼트의 위치를보다 세밀하게 제어 할 수있게 해주 며 현대적인 코딩 표준으로 더 잘 작동합니다.
<img itemprop="image" data-original="IMAGE URL" alt="A photo" class="lazy left" />
HTML 예제의 이미지 태그에 직접 CSS를 포함 시켰지만 , 당신은 정말로 더 이상 그렇게해서는 안됩니다. 대신 모든 CSS 코드를 포함하는 스타일 시트라는 별도의 파일이 있어야합니다.
IMG 태그에서 태그에 클래스를 지정하고 이름을 부여하기 만하면됩니다. 예제에서는 클래스 이름을 left로 지정했습니다. 내 스타일 시트에서해야 할 일은 다음과 같은 코드를 추가하는 것뿐입니다.
.left {
float: left;
padding: 0 10px 0 0;}
보시다시피, 왼쪽 맞춤 이미지의 오른쪽에 10px의 여백을 추가했습니다. . 또한 float 속성을 사용하여 문서의 일반적인 흐름에서 이미지를 이동하고 부모 컨테이너의 왼쪽에 배치했습니다.