콘텐츠
자정이고 저건 div 사이트에서 여전히 어린이 장난감 상자처럼 보입니다. 모든 요소가 뒤죽박죽이며 CSS를 사용할 때마다 디스플레이 재산, 그들은 완전히 다른 약간의 말도 안되는 부분으로 다시 배열됩니다.
당신이 저와 같다면 아마도 숨을 쉬면서 중얼 거리고 키보드를 계속해서 공격적으로 사용하여이 문제를 해결할 것입니다. 그 전략이 전에는 효과가 있었지만 최근에는 이해를 돕기 위해 더 나은 방법을 찾기 시작했습니다. 디스플레이 특성.
기본이 밝혀졌습니다. 디스플레이 원래 생각했던 것보다 훨씬 간단합니다. 사실, 그들은 여행 가방을 포장하는 것과 동일한 원칙을 사용합니다. 내가 다룰거야 표시 : 블록, 인라인 블록 과 인라인. 예전에 가방을 질서 정연하게 정리했다면 평행선을 보게 될 것입니다. 당신이 우연히 당신의 모든 옷을 찌르는 사람이라면 – 글쎄, 내가 당신을 위해 할 수있는 일이 너무 많아요.
여행 가방에는 세 가지 유형의 의류가 포함됩니다.
- 칼라 셔츠 같은 섬세함
- 말아 올릴 수있는 티셔츠
- 틈새를 채울 수있는 양말이나 속옷
참고로 여행 가방을 HTML로 모델링하면 다음과 같습니다.
div class = 'suitcase'> div class = 'delicate'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'socks'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> / div>
위에 섬세한 아이템
디스플레이 : 블록 대부분의 HTML 요소의 기본값입니다. 즉, 요소가 컨테이너 내의 전체 수평 공간을 차지합니다. div. 다른 형제 요소 옆에 있으면 새 줄을 시작하고 해당 줄에 다른 요소를 허용하지 않습니다. 그것은 당신의 여행 가방 위에 놓인 섬세한 물건과 비슷합니다. 이들은 깃이있는 셔츠와 같이 섬세하거나 똑똑한 제품입니다. 주름이 생기는 것을 원하지 않으므로 다른 옷에 밀착되지 않도록해야합니다.
이것은 가장 어려운 부분 중 하나를 불러옵니다. 표시 : 블록. 깃이있는 셔츠가 가방의 전체 너비를 차지하지 않는지 확인하십시오. 그렇다고 다른 항목이 해당 수준으로 점프한다는 의미는 아닙니다. 이 셔츠가 여행 가방 너비의 60 %라고 가정 해 보겠습니다. 여전히 다른 요소가 최상위 레벨에서 결합되는 것을 차단합니다.
이것이 그림에 주황색 테두리가있는 이유입니다. ㅏ 표시 : 블록 요소가 전체 수평 공간을 차지하지 않는 경우 자동으로 주변에 여백을 추가합니다.
깔끔하게 포장 된 티셔츠
여행 가방의 대부분은 아마도 여행을위한 나머지 옷으로 가득 차있을 것입니다. 간단하게하기 위해, 우리는 이것을 단지 티셔츠로 줄일 것입니다. 폴딩 또는 롤링이 더 효율적인지에 대해 인터넷에서 큰 논쟁이 있습니다. 나는 접는 사람입니다.
어쨌든, 대부분의 아이템을 맞추기 위해 티셔츠를 나란히 정렬합니다. 이것이 바로 표시 : 인라인 블록 의미합니다. 이러한 요소는 같은 줄에서 서로 옆에있을 수 있습니다. 표시 : 인라인 집단.
같지 않은 표시 : 인라인 요소, 인라인 블록 요소가 포함에 맞지 않으면 다음 줄로 이동합니다. div 다른 사람과 함께 인라인 블록 집단. 다음 줄에 티셔츠를 쏟으려면 절반으로 자르고 나머지 절반을 사용하여 새 줄을 시작해야합니다. 인라인 블록 요소가 한 줄에 맞지 않으면 반으로 나눌 수 없습니다.
틈새를 메우는 양말
원본 HTML을 다시 확인하면 양말이 하나 있음을 알 수 있습니다. div> 여덟 개의 티셔츠 사이. 하지만 오른쪽에있는 여행 가방의 가로보기를보십시오. 양말이 하나 있으면 div>, 어떻게 중간 행을 끝내고 맨 아래 행을 시작할 수 있습니까? 이것이 목적입니다 표시 : 인라인!
안 인라인 요소가 너비를 초과하면 다음 줄로 넘어갑니다. div (이렇게하면 인라인 블록 또는 블록). 우리 양말 이후 div 틈새에 우연히 채워진 양말로 가득 차 있습니다. 중간 줄 오른쪽의 틈새를 쉽게 채우기 시작하고 맨 아래 줄을 시작하기 위해 넘칠 수 있습니다.
이런 일이 일어나기 위해 양말을 반으로자를 필요가 없습니다. 이것이 그들이 될 수있는 이유입니다 인라인, 티셔츠는 인라인 블록. 가운데 줄의 티셔츠가 너비의 60 % 만 차지하면 양말 div> 나머지 행의 전체 공간을 채우기 위해 위로 이동합니다.
본보 야지
이것은 우리 여행 가방의 최종 CSS입니다.
.delicate {display : block; 폭 : 60 %; } .tshirt {display : inline-block; 너비 : 20 %; } .socks {display : inline; }
다음은 디스플레이의 다양한 용도를 설명하는 몇 가지 대체 시나리오입니다. 위에있는 조제 식품이 있었다면 표시 : 인라인 블록, 그들은 티셔츠와 함께 바로 맞을 것입니다. 일부 티셔츠는 상단 라인까지 올라가고 나머지는 그에 따라 조정됩니다. 깃이있는 셔츠의 왼쪽과 오른쪽에는 편안한 버퍼가 없습니다.
각 티셔츠에 디스플레이 블록, 당신은 한 줄에 하나씩, 서로 위에 많은 티셔츠를 쌓을 것입니다. 양말이 있었다면 표시 : 인라인 블록, 그들은 모두 두 줄 사이를 흐르기보다는 맨 아래 줄에 앉을 것입니다. 일부 티셔츠는 다른 줄로 밀려 네 번째 줄을 형성합니다. 티셔츠 가운데 줄 오른쪽에 틈이있을 것입니다.
여기서 설명한 방법을 사용하면 사용 가능한 공간을 최대한 활용할 수있는 깔끔하게 포장 된 여행 가방이 완성됩니다.
이 기사는 원래 넷 매거진 문제 289; 여기서 사세요!
