일

인접한 텍스트를 감싸도록 페이지에 이미지를 추가합니다.

해결책

그림 주위에 텍스트를 배치하는 것은 일반적으로 자료를 간결하게 배열하고 그림과 텍스트를 함께 연결하는 데 사용됩니다. 부동 자체는 IMG 선택기에 추가된 부동 스타일 속성을 사용하여 생성됩니다. 왼쪽 값은 이미지를 왼쪽, 오른쪽 - 오른쪽으로 정렬합니다. 이 경우 흐름은 다른 자유면을 따라 발생합니다.

예시 1. 사진 감싸기

HTML5 CSS 2.1 IE Cr Op Sa Fx

보카투예프 중위의 보고

어제 정찰 작전 중 우리 그룹은 외계인 위장복을 입은 정체불명의 적에게 공격을 받았습니다. 효과적인 방어와 신속한 반격의 결과로 대규모 무장 세력이 분쇄되어 후퇴했습니다. 인원 중 사상자는 없습니다. 정찰대 병사들은 무기 사용에 있어서 놀라운 기술을 보여주었다. 전투에서 특히 눈에 띄는 사람은 소대의 인적 자원을 현명하게 활용한 소대장 M.A. Kudryashev였습니다. 작업 결과, 외계 문화 요소가 포착되어 분석 그룹으로 전달되었습니다.

분석그룹의 보도자료

향정신성 무기는 판도라 프로젝트의 일환으로 비밀 실험실에서 개발되었습니다. 실패한 실험의 결과로 장치를 연구한 대부분의 과학자들은 향정신성 방사선에 노출되었고 열정적인 상태에서 프로토타입을 분해했습니다. 아마도 우리 과학자들은 아직도 열정에 빠져 있는 것 같습니다.

결과 이 예그림에 표시됩니다. 1.

쌀. 1. 그림이 포함된 텍스트

float 속성을 사용하면 텍스트가 이미지에 딱 맞게 표시됩니다. 따라서 이 예에서는 이미지와 텍스트 사이에 패딩을 추가하는 범용 속성인 margin 을 도입합니다. 사진의 위쪽, 오른쪽, 아래쪽, 왼쪽 들여쓰기를 동시에 설정하는 속성입니다.

안에 마이크로소프트 문서 Word에는 종종 다양한 이미지가 있습니다. 나는 때때로 의미에 따라 그림을 삽입하여 작성된 내용을 희석해야 한다고 확신합니다. 이렇게 하면 정보가 훨씬 더 잘 인식되기 때문입니다.

이 사이트에는 Word에 삽입된 이미지를 적절하게 사용하는 방법을 알아내는 데 도움이 되는 다양한 기사가 있습니다. 추가된 그림을 자르거나 Word에서 이미지를 필요한 각도로 회전할 수 있습니다. 문서에서 오른쪽 그림이나 아름다운 그림을 발견하면 해당 이미지를 컴퓨터에 저장할 수 있습니다.

이것이 바로 이 글에서 다룰 내용이다. Word에서는 측면뿐만 아니라 그림 주위로 텍스트가 흐를 수도 있습니다. 윤곽선을 따라 또는 프레임 주위에 뒤에 배치할 수 있습니다. 저는 MS Word 2010을 설치했지만, 촬영한 스크린샷은 항목 이름이 약간 다를 수 있다는 점을 제외하면 2007, 2013, 2016을 설치한 분들에게도 적합할 것입니다.

문서에 그림을 추가하고 두 번 클릭하여 탭을 엽니다. "그림 작업"– "형식". 그런 다음 "정렬" 그룹에서 버튼을 클릭합니다. "텍스트 감싸기". 열리는 상황에 맞는 메뉴에서 적절한 옵션을 선택하십시오.

원하는 메뉴를 다른 방법으로 열 수 있습니다. 딸깍 하는 소리 오른쪽 클릭이미지 위에 마우스를 놓고 선택하세요. "텍스트 감싸기". 그 후에 가능한 옵션이 다시 열립니다.

사용 가능한 모든 포장 유형을 자세히 살펴 보겠습니다.

– 프레임 주위에 작성된 개체를 배치합니다. 마우스로 그림을 클릭하면 프레임이 나타납니다. 이는 윤곽선을 따라 마커가 있는 직사각형입니다. 즉, 사진의 모양이 불규칙하더라도 텍스트는 여전히 직사각형으로 인쇄됩니다.

– 이 포장은 물체에 가장 적합합니다. 자유 형식, 단어가 프레임을 따라가 아니라 윤곽선을 따라 배치되도록 합니다.

"통과" – 흐름이 프레임 주위로 흐릅니다. 물체가 완전히 채워지지 않았지만, 어떤 형태의 빈 공간이 있을 때 사용하는 것이 더 좋습니다.

– 이미지가 작아도 오른쪽이나 왼쪽에 아무것도 쓰여지지 않습니다.

– 개체는 인쇄된 텍스트 뒤에 배치됩니다. 이미지를 선택하는 동안 윤곽선을 따라 표시가 있는 프레임이 있으므로 이동하고 편집할 수 있습니다. 그러나 단어를 편집하거나 입력하는 즉시 그림의 테두리가 쓰여진 것 이상으로, 즉 오른쪽이나 왼쪽 여백으로 확장되지 않는 한 더 이상 그림을 선택할 수 없습니다.

Word에서 그림을 배경으로 만들려면 이러한 유형의 배치가 사용됩니다. 이에 대한 자세한 내용은 링크를 따라가면 기사에서 읽을 수 있습니다.

“텍스트 앞” – 이미지가 텍스트 자체 위에 배치되어 텍스트를 덮습니다.

– 그림의 모양이 불규칙하거나 그림의 일부 단어를 쓰고 싶을 때 선택하면 됩니다. 이 경우 이미지 주위에 검은색 마커가 있는 빨간색 윤곽선이 나타납니다. 핸들을 움직여 윤곽선을 변경하세요. 원하는 위치의 빨간색 선을 클릭하고 마우스 커서를 다른 위치로 이동하면 새로운 마커를 추가할 수 있습니다.

대부분의 경우 사진 바로 옆, 오른쪽 또는 왼쪽에 무언가를 인쇄해야 합니다. 설명된 모든 방법 중에서 흐름이 이에 적합합니다. 이미지로 선택한 다음 개체를 문서의 원하는 부분으로 이동하여 텍스트가 예와 같이 오른쪽에 있거나 왼쪽에 위치하도록 합니다.

텍스트와 그림 사이의 거리가 적합하지 않은 경우에는 이를 변경하여 보다 적합한 값을 설정할 수 있습니다.

이렇게 하려면 이미지를 마우스 오른쪽 버튼으로 클릭하고 다음 중에서 선택하세요. 상황에 맞는 메뉴 "텍스트 감싸기" – .

별도의 "마크업" 창이 열립니다. 섹션에서 "텍스트와의 거리"이미지에서 텍스트가 있는 필드에 필요한 값을 표시합니다. 그런 다음 "확인"을 클릭하십시오.

예를 들어 이 거리를 늘렸습니다.

실험을 통해 텍스트가 윤곽선 등을 따라 이미지 오른쪽에 어떻게 보이는지 확인하세요. 문서에서 가장 적합한 이미지와 텍스트 배열을 선택하세요.

이 기사를 평가해 주세요:

웹 페이지의 모든 HTML 요소는 위에서 아래로(블록 요소의 경우), 왼쪽에서 오른쪽으로(인라인 요소의 경우) 공통 흐름으로 정렬됩니다. 이 표시 방법은 그다지 효과적이지는 않지만 CSS 덕분에 더 나은 디자인으로 변경할 수 있습니다.

플로팅 요소

플로팅 요소를 정의할 때 플로팅 요소 아래의 코드에 배치된 다른 모든 콘텐츠는 웹 페이지에서 해당 요소 주위로 흐릅니다. 브라우저가 웹 페이지의 부동 요소와 기타 콘텐츠를 로드하는 방법을 자세히 살펴보겠습니다.

먼저, 브라우저는 위에서 아래로 이동하면서 정상적인 순서로 페이지에 요소를 로드하고, 부동 요소를 만나면 지정된 면에 요소를 배치합니다. 브라우저는 이 요소를 일반 흐름에서 제외하고 결과적으로 페이지에 "떠다닙니다".

플로팅 요소가 일반 흐름에서 제외되었기 때문에 이후 코드에 있는 나머지 블록 요소는 이 요소가 없는 것처럼 페이지에 로드됩니다. 블록 요소는 플로팅 요소 아래에 배치됩니다. 이는 플로팅 요소가 더 이상 전체 흐름의 일부가 아니기 때문입니다.

그림을 자세히 보면 블록 요소와는 다르게 인라인 요소나 내부에 간단한 텍스트를 배치할 때 나타나는 것을 알 수 있습니다. 블록 요소, 플로팅 요소의 경계가 존중되므로 인라인 요소와 텍스트가 그 주위로 흐릅니다.

상위 요소의 너비가 허용하는 경우 한 행에 여러 개의 부동 요소를 배치할 수 있다는 점을 기억하세요.

참고: 절대 및 고정 위치 요소는 부동 속성을 무시합니다.

와 함께 CSS를 사용하여 float 속성 이미지가 왼쪽에 뜨도록 만들었습니다.

이미지 아래 HTML 코드에 있는 텍스트는 오른쪽과 아래쪽을 따라 이미지를 둘러쌉니다.

노력하다 "

그림과 그림 주위의 텍스트 사이에 빈 공간을 만들려면 그림에 여백을 추가해야 합니다. 이미지가 상위 요소의 왼쪽 테두리에 오프셋되어 있으므로 오른쪽과 아래쪽에만 패딩을 추가하면 텍스트를 약간 멀리 이동할 수 있습니다.

Img ( float: left; margin: 0 10px 10px 0; ) 시도해 보세요 »

랩 취소 때로는 요소 앞에 떠 있는 요소의 영향을 받지 않도록 요소를 표시하고 싶을 때가 있습니다. 예를 들어 이러한 요소는 페이지의 다른 모든 요소 아래에 표시되어야 하는 바닥글이 될 수 있습니다. 귀하의 페이지가 높은 경우사이드 메뉴 웹페이지의 왼쪽 가장자리에 있는 바닥글은 위로 올라가서 오른쪽에 나타날 수 있습니다. 따라서 페이지에 위치하는 대신 바닥글 내용이 사이드바와 같은 높이로 표시됩니다.이 문제

이 문제는 스타일이 지정된 요소가 부동 요소 주위를 둘러싸서는 안 된다는 것을 브라우저에 알려주는 명확한 속성을 사용하여 해결됩니다.

• CSS Clear 속성은 다음 값 중 하나로 설정할 수 있습니다.
• 왼쪽 - 부동 요소는 왼쪽에 허용되지 않습니다. 오른쪽 - 부동 요소는 허용되지 않습니다..
• 오른쪽
• 둘 다 - 양쪽에 부동 요소가 금지됩니다.

레이아웃 디자이너에게 비표준적인 작업이 주어지는 경우가 많습니다. 우리의 목표는 가장 합리적이고 올바른 솔루션을 제공하는 것입니다. 오늘은 이미지를 텍스트로 감싸는 기능에 대해 이야기하겠습니다.

문제 설명

당신을 위한 기사 쓰기 정보자원또는 블로그에는 텍스트가 표시되는 과정에서 이미지가 산재되어 있는 경우가 많습니다. 검색 로봇은 항상 사이트의 사진 존재를 존중해 왔기 때문에 사용자는 밝은 이미지가 포함된 텍스트에 더 만족할 것입니다. 따라서 텍스트와 그림 간의 아름다운 상호 작용을 보장하는 특별한 형식 지정 방법을 설치할 필요가 있습니다.

텍스트 줄 바꿈이 필요하지 않은 경우를 고려해 보겠습니다. 또한 저는 범용 옵션을 제공합니다. 그림이 없으면 텍스트가 블록의 전체 너비에 걸쳐 늘어납니다(모든 기사에 그림이 포함되는 것은 아닙니다). 텍스트 블록의 너비는 엄격하게 고정되어 있지 않습니다. 아래는 우리 블록의 모습입니다.

올바른 결정

작업을 구현하기 위해 두 개의 블록을 만듭니다. 하나는 그림용이고 다른 하나는 텍스트용입니다. 이미지 아래에 다른 요소가 있을 수 있다는 사실을 고려하여 이미지에 대한 별도의 컨테이너를 생성합니다. 그렇지 않으면 이것이 필요하지 않으며 필요한 클래스를 이미지 태그에 할당하기만 하면 됩니다.

HTML

< div class = "image" > < img src= "img.png" width= "100px" height= "100px" alt= "" /> < div class = "text" >텍스트 블록

디스플레이: 인라인;

)

이는 그림으로 블록을 둘러싸는 텍스트에 대한 표준 솔루션입니다. 다음과 같이 보일 것입니다: 부동 개체의 속성을 텍스트에 할당하도록 제안하는 것은 매우 논리적입니다. 그렇지 않은 경우값 설정

객체의 너비는 다음 그림을 얻습니다.

이 효과를 피하려면 텍스트 블록의 너비를 지정하기만 하면 되지만 이는 우리 작업 조건을 충족하지 않습니다.

다음으로 좋은 옵션은 margin-left 속성을 사용하는 것입니다. 블로그의 경우 이 블록에 있는 모든 사진의 크기가 통일될 가능성이 높으므로 해결책은 원칙적으로 나쁘지 않고 효과적입니다. 그러나 이것은 단지 특별한 경우일 뿐입니다. 기사에 사진이 없으면 왼쪽에 빈 스트립만 있을 것이기 때문입니다. 이것은 우리에게 적합하지 않습니다. 우리는 보편적인 솔루션을 찾고 있습니다! 그리고 흔히 그렇듯이 가장 정확한 해결책은 가장 간단한 것입니다. 원하는 텍스트 블록 형식을 얻으려면 값을 사용하여 오버플로 속성에 액세스해야 합니다.. 독특한 Internet Explorer를 잊지 마세요. 평소처럼 그는 과시하고 특별한 관심이 필요합니다! 노인이 정상적으로 작동하려면 텍스트 블록에 float 속성을 추가합니다(오버플로 속성에 액세스한 후에는 고정 너비를 정의할 필요가 없습니다).

따라서 우리는 작업 조건을 설명하는 하위 섹션의 그림에 표시된 효과로 이어질 올바른 솔루션에 도달했습니다.

이미지( float: left; /*wrap */ margin: 10px; /*미용을 위한 외부 패딩 */디스플레이: 인라인; /* IE6의 경우 왼쪽 여백이 두 배가 되지 않도록 */) . 텍스트( 오버플로: 숨김; 부동: 왼쪽; )

방법 및 대안의 단점

사용으로 구성된 방법의 단순성과 다양성에도 불구하고 오버플로:숨김, 한 가지 단점이 있습니다. 드롭다운 요소가 텍스트 부분에 사용되는 경우 속성은 더 이상 해당 기능을 수행하지 않습니다.

이 경우 원하는 형식을 구성하기 위한 대안이 필요합니다. 이 기술은 조합의 기능을 기반으로 합니다. 디스플레이:테이블 셀;. 이 솔루션은 효과적이지만 첫 번째 방법에 비해 단순성이 약간 떨어집니다. 이 메서드를 호출할 때 Internet Explorer 환경에서 작동하도록 레이아웃도 설정해야 합니다.

Img(플로트: 왼쪽; /* 줄 바꿈 설정 */여백: 10px; /* 아름다움을 위한 들여쓰기 */디스플레이: 인라인; /* IE6의 경우 왼쪽 여백이 두 배가 되지 않도록 */) . 텍스트( 표시: 테이블 셀; 확대/축소: 1 ; /* 주의하여! 문자열이 잘못되었습니다 */ }

그리고 이 솔루션에는 레이아웃 중에 고려해야 할 고유한 특성이 있습니다. 텍스트 부분이 충분히 짧으면 다음 블록은 텍스트 클래스가 있는 블록 오른쪽에 표시됩니다. 이를 방지하려면 텍스트 블록과 이미지를 별도의 컨테이너에 넣어야 합니다.

어떤 브라우저에서 작동하나요?

6.0+	5.0+	9.5+	4.0+	3.0+	-	-

그림과 텍스트로 구성된 블록을 배치하고 그림 주위에 텍스트가 흐르지 않아야 합니다.

왼쪽은 맞고 오른쪽은 아님

추가 조건: 텍스트나 이미지의 너비가 엄격하게 정의되지 않습니다. 이미지가 없으면 텍스트가 할당된 너비 전체를 차지합니다.

해결책

스타일을 작성해 봅시다. 왼쪽 열을 보면 모든 것이 명확해집니다.

Photo ( float: left; /* 래핑 설정 */ margin:10px; /* 아름다움을 위한 들여쓰기 */ display:inline; /* IE6의 경우 왼쪽 들여쓰기가 두 배가 되지 않도록 */ )

이제 그림은 왼쪽에 있고 텍스트는 오른쪽에 표시됩니다. 그러나 더 많은 텍스트가 있으면 그림 아래로 "들어가게" 되며(위 그림 참조) 이는 필요하지 않습니다.

가장 먼저 떠오르는 것은 텍스트를 "떠다니는" 것입니다. 하지만 이 경우 너비를 지정하지 않으면 텍스트가 그림 아래로 들어가게 됩니다!

float:left/right에는 너비가 필요합니다. 그렇지 않으면 아무것도 작동하지 않습니다!

우리는 더 생각합니다 ... 좋은 결정설명(: XXXpx)처럼 보일 수 있습니다. 실제로 어떤 상황에서는 이 옵션이 작동합니다. 예를 들어 이미지 크기가 여전히 설정된 경우입니다. 고무 뉴스 블록이라고 가정 해 봅시다. 이미지는 200px처럼 더 넓어질 수 없지만 텍스트는 이미 늘어나 나머지 전체 너비를 차지합니다.

그러나 이 옵션에는 중요한 단점. 그림이 있는 블록이 없으면 들여쓰기는 여전히 어색한 구멍으로 남게 됩니다. 물론 기사에 설명된 대로 자매 요소 선택기를 사용하여 제거할 수 있지만 우리의 경우에는 다른 해결 방법이 있습니다.

간단히 :hidden;을 추가하면 래핑을 방지할 수 있습니다. 텍스트 열의 경우. 따라서 우리는 그녀를 위해 설립할 것입니다 새로운 맥락형식화(이 주제는 곧 더 자세히 다루겠습니다).

이에 대해 잘못 반응하는 유일한 브라우저는 물론 IE6입니다. 예를 들어 "float"(너비를 설정할 필요가 없음)와 같이 특별히 열을 설정했습니다.

따라서 문제에 대한 해결책은 다음과 같습니다.

Photo ( float: left; /* float 설정 */ margin:10px; /* 아름다움을 위한 들여쓰기 */ display:inline; /* IE6의 경우 왼쪽 들여쓰기가 두 배가 되지 않도록 */ ) .description( Overflow:hidden ; ) * html .description( float:왼쪽; )

언제나 그렇듯이 전투 상황에서는 .