CSS 래핑을 제거합니다. CSS: 요소 래핑. 레이어 레이아웃을 가로로
그림과 텍스트로 구성된 블록을 배치하고 그림 주위에 텍스트가 흐르지 않아야 합니다.
왼쪽은 맞고 오른쪽은 아님
추가 조건: 텍스트나 이미지의 너비가 엄격하게 정의되지 않습니다. 이미지가 없으면 텍스트가 할당된 너비 전체를 차지합니다.
해결책
스타일을 작성해 봅시다. 왼쪽 열을 보면 모든 것이 명확해집니다.
Photo ( float: left; /* 래핑 설정 */ margin:10px; /* 아름다움을 위한 들여쓰기 */ display:inline; /* IE6의 경우 왼쪽 들여쓰기가 두 배가 되지 않도록 */ )
이제 그림은 왼쪽에 있고 텍스트는 오른쪽에 표시됩니다. 그러나 더 많은 텍스트가 있으면 그림 아래로 "들어가게" 되며(위 그림 참조) 이는 필요하지 않습니다.
가장 먼저 떠오르는 것은 텍스트를 "떠다니는" 것입니다. 하지만 이 경우 너비를 지정하지 않으면 텍스트가 그림 아래로 들어가게 됩니다!
float:left/right에는 너비가 필요합니다. 그렇지 않으면 아무것도 작동하지 않습니다!
좀 더 생각해 봅시다... .description( : XXXpx)이 좋은 해결책처럼 보일 수도 있습니다. 실제로 어떤 상황에서는 이 옵션이 작동합니다. 예를 들어 이미지 크기가 여전히 설정된 경우입니다. 고무 뉴스 블록이라고 가정 해 봅시다. 이미지는 200px처럼 더 넓어질 수 없지만 텍스트는 이미 늘어나 나머지 전체 너비를 차지합니다.
그러나 이 옵션에는 심각한 단점이 있습니다. 그림이 있는 블록이 없으면 들여쓰기는 여전히 어색한 구멍으로 남게 됩니다. 물론 기사에 설명된 대로 자매 요소 선택기를 사용하여 제거할 수 있지만 우리의 경우에는 다른 해결 방법이 있습니다.
간단하게 :hidden;을 추가하면 래핑을 방지할 수 있습니다. 텍스트 열의 경우. 이를 통해 새로운 형식 지정 컨텍스트를 설정합니다(이 주제는 곧 더 자세히 다루겠습니다).
이에 대해 잘못 반응하는 유일한 브라우저는 물론 IE6입니다. 예를 들어 "float"(너비를 설정할 필요가 없음)와 같이 특별히 열을 설정했습니다.
따라서 문제에 대한 해결책은 다음과 같습니다.
Photo ( float: left; /* float 설정 */ margin:10px; /* 아름다움을 위한 들여쓰기 */ display:inline; /* IE6의 경우 왼쪽 들여쓰기가 두 배가 되지 않도록 */ ) .description( Overflow:hidden ; ) * html .description( float:left; )
언제나 그렇듯이 전투 상황에서는 .
현대 웹 디자인에서는 속성이 뜨다거의 모든 단계에서 사용됩니다. 그러나 이러한 널리 퍼져 있음에도 불구하고 모든 사람이 플로팅 블록의 메커니즘, 동작 및 사용 결과를 이해하는 것은 아닙니다.
"플로트"란 무엇입니까?
뜨다이것은 CSS 위치 지정 속성입니다. 그 본질과 유래를 이해하려면 인쇄된 디자인에 주목할 필요가 있습니다. 인쇄된 레이아웃에서는 텍스트가 주위에 흐르도록 이미지가 배치될 수 있습니다. 이것은 일반적으로 "라고 불립니다. 텍스트 줄 바꿈".
페이지 레이아웃에서 텍스트가 포함된 블록을 지정하여 사용할 수 있습니다. 이미지 주위에 텍스트 배치또는 포장을 무시하십시오. 텍스트 줄바꿈을 무시하면 단어가 이미지에 없는 것처럼 이미지 위로 흘러갈 수 있습니다. 이는 이미지가 페이지 흐름의 일부인지 여부에 차이를 만듭니다. 웹 디자인에서는 모든 것이 매우 유사합니다.
웹 디자인에서 CSS 속성이 적용된 요소 뜨다인쇄된 레이아웃에서 이미지 주위에 텍스트가 배치된 이미지처럼 작동합니다. 플로팅 요소는 웹페이지 흐름의 일부로 남아 있습니다. 이는 마치 인쇄된 레이아웃에서 텍스트 블록이 이미지 줄 바꿈을 무시하도록 지시한 것처럼 흐름에서 제거되는 절대 위치 지정 요소와는 상당히 다릅니다. 절대적으로 배치된 요소는 다른 요소의 배치에 영향을 주지 않으며 다른 요소는 해당 배치에 영향을 주지 않습니다.
속성 설정 뜨다 CSS를 사용하는 요소의 경우 다음과 같습니다.
#사이드바(플로트: 오른쪽; )
속성에는 4가지 유효한 값이 있습니다. 뜨다 - 왼쪽, 오른쪽, 없음, 상속하다. 처음 두 개 왼쪽그리고 오른쪽위치의 방향을 각각 왼쪽과 오른쪽으로 나타냅니다. 없음- 기본값은 요소가 부동 상태가 아니라는 것을 나타냅니다. 상속하다요소에 속성 값을 상속하도록 지시 뜨다상위 요소에서.
플로트는 무엇에 사용되나요?
이미지 주위에 텍스트를 배치하는 간단한 예를 넘어, 뜨다웹 레이아웃을 만드는 데 사용할 수 있습니다.
뜨다, 작은 레이아웃 요소에도 사용하기 편리합니다. 예를 들어, 웹페이지의 작은 부분을 살펴보겠습니다. 속성을 설정하면 뜨다작은 아바타 이미지의 경우 이미지 크기가 변경되면 새 이미지 크기에 따라 배치가 변경됩니다.
컨테이너의 상대적 위치 지정과 그 안에 있는 아바타 및 텍스트의 절대 위치 지정을 사용하여 동일한 레이아웃을 구현할 수 있습니다. 그러나 이 구성표에 따라 구현된 레이아웃에서는 절대 위치 지정 요소가 다른 요소에 영향을 주지 않고 다른 요소도 해당 요소에 영향을 주지 않기 때문에 이미지 크기를 변경해도 텍스트 블록에 영향을 미치지 않습니다.
랩 재설정
분명한재산과 관련된 재산 뜨다. 속성 집합이 있는 요소 분명한속성이 설정된 요소 주위로 위쪽으로 이동하지 않습니다. 뜨다, 그러나 흐름을 무시하고 아래쪽으로 이동합니다. 그리고 다시, 더 이상 고민하지 않고 모든 것을 설명할 그림입니다.
위의 예에서 사이드바는 기본 콘텐츠 블록 오른쪽에 떠 있었습니다. “바닥글”은 사이드바 아래의 여유 공간으로 이동하여 메인 콘텐츠가 있는 블록을 중심으로 흐르게 되었습니다. 이 문제를 해결하려면 두 열 주위의 흐름을 "지우기" 위해 바닥글의 clear:both 속성 값을 지정해야 합니다.
#footer (지우기: 둘 다; ) 
재산 분명한네 가지 뜻이 있습니다. 둘 다양방향의 흐름을 완화하는 데 사용됩니다. 왼쪽그리고 오른쪽한 방향(각각 왼쪽 또는 오른쪽)을 재설정하는 데 사용됩니다. 없음- 기본값. 상속다섯 번째 값일 수 있지만 놀랍게도 지원되지 않습니다. 인터넷 익스플로러. 왼쪽 또는 오른쪽 흐름만 재설정하는 것은 매우 드물지만 실질적인 이점이 있습니다.
대붕괴
함께 일하면서 한 가지 뜨다궁금한 점은 이 속성이 상위 요소에 미치는 영향입니다. 상위 요소에 부동소수점 이외의 요소가 포함되어 있지 않으면 높이가 말 그대로 축소됩니다. 특히 상위 요소에 눈에 띄는 배경이 없는 경우에는 이것이 항상 눈에 띄는 것은 아니지만 명심하는 것이 중요합니다.
그러나 그러한 붕괴에 대한 대안은 훨씬 더 나쁩니다. 다음 시나리오를 고려해보세요.
상단 블록이 플로팅 요소를 수용하기 위해 자동으로 확장되면 단락 사이의 텍스트 흐름에 공백이 생기고 이를 수정할 방법이 없습니다. 만약 그렇다면 개발자들은 현재 붕괴에 대해 불평하는 것보다 부동 블록의 이러한 동작에 대해 훨씬 더 자주 불평할 것입니다.
이상한 레이아웃 동작과 브라우저 간 문제를 방지하려면 축소를 항상 염두에 두어야 합니다. 우리는 다음을 사용하여 이 문제를 해결할 수 있습니다. 분명한컨테이너의 부동 요소 뒤, 컨테이너가 닫히기 전.
포장 취소 기술
다음 요소가 어디에 있을지 알고 있는 상황이라면, clear:both를 사용하여 업무를 진행할 수 있습니다. 해킹이나 추가 요소가 필요하지 않기 때문에 이상적입니다. 그러나 불행하게도 일반적으로 모든 것이 우리가 원하는 대로 진행되는 것은 아니며, 이 경우 다음 도구를 사용할 수 있습니다.
빈 블록 방식.
말 그대로 빈 블록입니다.
. 때로는 요소를 찾을 수 있습니다.
또는 다른 임의의 요소이지만 div는 브라우저에 기본 스타일이 없고 특별한 기능이 없으며 일반적인 CSS 스타일이 아닐 가능성이 높기 때문에 가장 일반적입니다. 이 방법은 페이지에서 문맥상 의미가 없고 단지 외관상 존재하기 때문에 의미론적 순수주의자에 의해 거부됩니다. 물론 엄밀한 의미에서는 그들이 옳지만 그는 자신의 일을 하고 누구에게도 해를 끼치지 않습니다.
오버플로 방법.
CSS 속성 지정을 기반으로 함 과다상위 요소의 경우. 이 속성이 다음으로 설정된 경우 자동또는 숨겨진상위 요소의 경우 부동 요소 다음에 확장되어 후속 요소에 대한 래핑을 효과적으로 재설정합니다. 이 방법은 추가 요소가 필요하지 않기 때문에 의미상 아름다울 수 있습니다. 그러나 보시다시피 새로운 항목을 추가했습니다. div이 방법을 사용하는 것은 의미가 없는 빈 블록을 사용하는 것과 동일하며 유연성이 떨어집니다. 부동산이라는 점도 기억해 두셔야 합니다. 과다래핑을 비활성화하기 위한 것이 아닙니다. 실수로 콘텐츠를 숨기거나 원치 않는 스크롤 막대가 발생하지 않도록 주의하세요.
간편한 청소 방법.
CSS 의사 선택기(:after)를 사용하여 래핑을 제거합니다. 부동산을 이용하는 대신 과다상위 요소의 경우 "clearfix"와 같은 추가 클래스를 설정하고 다음 CSS 스타일을 사용합니다.
Clearfix:after ( 내용: "."; 가시성: 숨김; 표시: 블록; 높이: 0; 지우기: 둘 다; )
이는 상위 요소 뒤에 있는 보기에서 숨겨진 작은 콘텐츠 조각을 사용하여 래핑을 재설정합니다. 이 방법은 구형 브라우저를 지원하려면 개선이 필요하기 때문에 완전하지 않습니다.
상황에 따라 다양한 블러프 완화 방법이 필요합니다. 다양한 유형의 블록으로 구성된 그리드를 예로 들어 보겠습니다.
유사한 블록을 시각적으로 더 잘 결합하려면 색상이 변경될 때 새 줄을 시작해야 합니다. 각 색상 그룹에 상위 요소가 있는 경우 오버플로 또는 조명 제거 방법을 사용할 수 있습니다. 또는 그룹 간에는 빈 블록 방식을 사용합니다. 이전에 존재하지 않았던 세 개의 상위 블록 또는 이전에 존재하지 않았던 세 개의 빈 블록입니다. 어떤 방법이 더 나은지 결정하는 것은 귀하에게 달려 있습니다.
부동 요소 관련 문제
플로팅 요소는 취약성 때문에 종종 비판을 받습니다. 이러한 취약성의 대부분은 IE6과 IE6에서 비롯됩니다. float 지향 버그. 그러나 점점 더 많은 개발자가 IE6에 대한 지원을 중단함에 따라 이에 대해 생각하지 못할 수도 있지만 호환성에 관심이 있는 사람들을 위해 여기에 짧은 목록이 있습니다.
아래로 밀어는 플로팅 블록 내부의 요소가 해당 블록보다 넓다는 증상입니다(일반적으로 이미지에서 발생함). 대부분의 브라우저는 떠 있는 요소를 튀어나오게 렌더링하지만 이는 레이아웃에 영향을 주지 않습니다. IE는 플로팅 블록을 확장하며 이는 종종 레이아웃에 큰 영향을 미칩니다. 일반적인 예는 메인 콘텐츠 블록 밖으로 튀어나와 사이드바를 아래로 밀어내는 이미지입니다.
문제에 대한 빠른 해결: 오버플로 사용: 숨김; 초과분을 다듬기 위해.
이중 마진 버그- IE6으로 작업할 때 기억해야 할 또 다른 사항입니다. 이 버그는 필드가 방향과 같은 쪽에 있는 경우 발생합니다. 뜨다, 필드가 두 배로 늘어납니다. 예를 들어:
우리는 왼쪽 필드를 얻을 것입니다 40px., 대신에 20px.
문제에 대한 빠른 해결: 부동 블록에 대해 디스플레이: 인라인을 설정하고 요소가 블록 수준으로 유지될 것을 걱정하지 마십시오.
3px 조그. 이 버그의 핵심은 플로팅 요소 옆에 있는 텍스트가 마치 플로팅 요소 주위에 있는 역장의 영향을 받는 것처럼 3픽셀만큼 이상하게 이동한다는 것입니다. 문제에 대한 빠른 해결: 영향을 받는 텍스트의 너비와 높이를 설정합니다.
IE7에 나타남 하단 여백 버그, 상위 요소가 부동 요소이고 그 안에 있는 하위 요소도 부동 요소인 경우. 하위 요소의 아래쪽 여백(margin-bottom)은 조상 요소에 의해 무시됩니다. 문제에 대한 빠른 해결: 하위 요소의 margin-bottom 대신 상위 요소의 padding-bottom을 사용합니다.
예를 들어, 래퍼 블록 3개와 번호가 매겨진 블록 3개를 포함하는 페이지에 HTML 코드를 추가해 보겠습니다.
이제 일반적인 스타일을 지정해 보겠습니다.
Container1, .container2, .container3( 너비: 70%; 여백: 15px 자동 0; 배경색: #CCFFCC; 테두리: 2px 단색 #ccc; 패딩:20px; ) .block1, .block2, .block3( 패딩 상단 : 35px; 텍스트 정렬: 중앙; 글꼴 크기: 28px; 텍스트 그림자: 1px 1px 1px rgba(0, 0, 0, 0.5); 배경색: #CCCCFF; 높이: 65px; 너비: 100px; )
결과적으로 다음과 같은 사진을 얻게 됩니다.
번호가 매겨진 블록에 float 속성을 추가해 보겠습니다.
Block1, .block2, .block3( 부동: 왼쪽; ) 
첫 번째 방법은 기본 블록 요소에서 둘 다의 값과 함께 명확한 속성을 사용하는 것입니다.
이것은 일반적인 옵션이며 과거에 많이 사용했지만 제 생각에는 이것이 최고는 아닙니다. HTML 페이지의 마크업을 고려할 때 논리에 맞지 않는 불필요한 요소를 사용하고 싶지 않다는 점에 동의하세요.
두 번째 방법은 불필요한 HTML 코드를 추가할 필요가 없습니다. 이를 사용하려면 컨테이너에 한 줄만 작성하면 됩니다. auto 값으로 오버플로됩니다. 이 방법을 사용한 후에는 단 한 가지 단점이 있습니다. 내부에 있는 내용물은 포장 블록의 통로 밖으로 이동할 수 없습니다. 이는 통로 외부의 용기를 기준으로 무언가를 배치해야 할 때 매우 불편할 것입니다.
컨테이너2( 오버플로: 자동; ) 
제 생각에는 세 번째 방법이 가장 최적입니다. 첫 번째와 두 번째 방법의 장점은 불필요한 요소가 없고 명확한 속성을 사용할 수 있다는 것입니다. 이를 구현하려면 의사 요소 뒤에 사용해야 합니다. div 요소를 시뮬레이션하는 데 사용할 수 있습니다. 보려면 배경을 지정하고 높이를 0에서 2px로 변경하세요.
Container3:after( 내용: ""; 표시: 블록; 지우기: 둘 다; 높이: 2px; 배경색: #000; )
이것이 CSS에서 래핑을 방지하는 방법입니다. 아마도 이 문제를 해결하는 다른 방법이 있을 수도 있습니다. 알아두면 흥미로울 것입니다. 댓글에 옵션을 적어주세요.
레이아웃 디자이너에게 비표준적인 작업이 주어지는 경우가 많습니다. 우리의 목표는 가장 합리적이고 올바른 솔루션을 제공하는 것입니다. 오늘은 이미지를 텍스트로 감싸는 기능에 대해 이야기하겠습니다.
문제의 공식화
정보 리소스나 블로그에 대한 기사를 작성할 때 종종 사진이 포함됩니다. 검색 로봇은 항상 사이트의 사진 존재를 존중해 왔기 때문에 사용자는 밝은 이미지가 포함된 텍스트에 더 만족할 것입니다. 따라서 텍스트와 그림 간의 아름다운 상호 작용을 보장하는 특별한 형식 지정 방법을 설치할 필요가 있습니다.
텍스트 줄 바꿈이 필요하지 않은 경우를 고려해 보겠습니다. 또한 저는 보편적인 옵션을 제공합니다. 그림이 없으면 텍스트가 블록의 전체 너비에 걸쳐 늘어납니다(모든 기사에 그림이 포함되는 것은 아닙니다). 텍스트 블록의 너비는 엄격하게 고정되어 있지 않습니다. 아래는 우리 블록의 모습입니다.
올바른 해결책
작업을 구현하기 위해 두 개의 블록을 만듭니다. 하나는 그림용이고 다른 하나는 텍스트용입니다. 이미지 아래에 다른 요소가 있을 수 있다는 사실을 고려하여 이미지에 대한 별도의 컨테이너를 생성합니다. 그렇지 않으면 이것이 필요하지 않으며 필요한 클래스를 이미지 태그에 할당하기만 하면 됩니다.
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+ | - | - |
올바르게 사용하면 float는 요소를 정렬하고 구성하는 데 사용되는 강력한 레이아웃 도구로 변합니다. 그러나 이 도구를 제어 상태로 유지하려면 균형추가 필요하며, 균형추가 없으면 플로트의 엄청난 잠재력이 몇 가지 좁은 작업으로 축소됩니다. 우리는 다른 방법을 사용하여 흐름을 취소하는 것에 대해 이야기하고 있습니다. 가장 인기 있는 몇 가지를 나열해 보겠습니다.
요소의 너비
부동 요소가 사용 가능한 전체 너비를 차지하는 경우 그 뒤에 오는 나머지 요소는 새 줄에서 시작됩니다. 이렇게 하려면 요소의 전체 너비가 100%여야 합니다. 예제 1에서는 한 줄에 화살표를 만드는 방법을 보여줍니다.
예시 1: 너비 사용
이제 화살표가 있는 각 블록은 너비의 50%를 차지하고 너비의 합은 최대 100%가 되므로 화살표 뒤의 단락이 새 줄에서 시작됩니다.
이 방법은 요소의 너비를 명시적으로 지정하는 것이 항상 가능한 것은 아니며 블록 높이와 배경의 문제를 해결하지 못하기 때문에 거의 사용되지 않습니다(그림 1).
쌀. 1. 배경 채우기 없음
오버플로 사용
청소 플로트 2
그림과 같이 웹페이지를 생성합니다. 1. 루블을 표시하려면 기호 ₽를 사용합니다.
답변 표시
