광고문안 래핑 효과를 얻으려면 CSS의 Clear 속성을 사용하세요.

대형 웹사이트의 광고는 텍스트를 감싸기 위해 콘텐츠 중간에 배치되는 것을 보셨나요? 일반적으로 일반 소규모 웹사이트의 광고는 콘텐츠의 시작 부분이나 끝 부분에만 배치될 수 있습니다. 아마도 대형 웹사이트의 cms 시스템은 그렇지 않을 것입니다. 이 기능은 우리 소규모 웹사이트에서 흔히 사용하는 cms의 기본 기능인데, 기사 추가 시 수동으로 편집하지 않으면 콘텐츠 태그에 자동으로 광고 태그를 추가하는 것이 불가능하기 때문에 피곤하지 않습니다.

나는 그것을 제어하기 위해 CSS를 사용하는 것을 생각해 본 적이 없습니다. 주로 나는 명확한 속성을 기대하지 않았기 때문입니다. 오늘 우연히 소개를 보고 텍스트 래핑을 구현하는 것이 매우 간단하다는 것을 깨달았습니다.

코드 예:

<div 클래스="뉴스">
<div style="float:left;height:300px;width:0">너비가 0인 빈 레이어, 이 레이어의 높이를 사용하여 광고 레이어의 상단 및 하단 위치를 제어합니다</div>
<div style="float:left;height:250px;width:250px;clear:left;">광고 코드</div>
</div>

핵심은 Clear:Left의 역할에 있습니다. Clear에는 Clear:Both, Clear:Left, Clear:Right의 세 가지 속성이 있으며 각각 양쪽, 왼쪽, 오른쪽의 플로팅 블록을 지우는 것을 나타냅니다. 광고 레이어에 clear:left를 추가하면 해당 레이어가 더 이상 빈 레이어에 대해 떠있지 않고 아래로 이동한다는 의미입니다. 하하.

비교해 봅시다:

<div 클래스="뉴스">
<div style="float:left;height:300px;width:100px;ground:#CCC;">효과 관찰을 용이하게 하기 위해 너비와 배경 추가</div>
<div style="float:left;height:250px;width:250px;">클리어 플로트를 제거하면 그 의미를 알 수 있습니다</div>
</div>

이것을 추가하면:

<style>.news img,.news table{clear:both;}</style> //콘텐츠 내 사진과 표가 광고를 가리지 않도록 합니다.

불행하게도 위의 테스트에서는 IE만 가능한 것으로 나타났습니다. Firefox와 Opera는 다른 결과를 얻었습니다. IE의 효과는 광고 레이어를 만나면 이미지가 자동으로 아래로 이동하지만 광고 레이어를 덮지는 않습니다. 광고 레이어가 맨 앞에 있기 때문에 오페라에서는 이미지가 아래로 움직이지 않고 광고 레이어를 덮게 됩니다.

다시 개선되었습니다:

<style>.news img,.news table{clear:both;position:relative;z-index:-1;}</style> //그림과 표가 자동으로 하단에 오도록 합니다.

드디어 완성이 되어 꽤 완벽해졌고, 이제 주변 광고 컨텐츠의 효과도 완성되었습니다 :)

//2008-02-29, 수정자: 무엇입니까?

추가하는 것을 잊었습니다

어떤 분이 오른쪽 상단과 하단에 텍스트를 줄바꿈해야 하는지 문의하셔서 다음과 같이 변경했습니다.