에스컬레이터를 타고 설명하는 CSS 수레

에스컬레이터를 타 본 적이 있다면 수레를 빨리 이해할 수 있습니다.

귀하의

는 거의 완벽합니다. 몇 가지 요소 간의 관계를 해결하기 위해 일부 부동을 도입하기로 결정했습니다.

다음으로, 새로 떠 다니는 요소는 신중하게 선택한 순서에서 벗어나 자석처럼 div 측면에 붙어 있습니다. "의도하지 않은 행동"이라는 문구가 떠 오릅니다.

저는 수레를 완전히 이해하려고 개인적으로 몇 시간을 보냈습니다. 기사를 읽고“아,이 말이 타당 해!”라고 말한 다음 코드로 돌아가서 사용해보고 실패합니다. 드로잉 보드로 돌아갑니다.

이 운명을 극복하기 위해 최선을 다하겠습니다.

플로트는 다른 흐름을 만듭니다. 이것은 이해하기 가장 어려운 부분입니다. 그리고 일단 그것들을 소개하고 나면 코드를 작성하여 최대 3 개의 흐름 (일반, 왼쪽 및 오른쪽)을 설명해야합니다. 이것은 요소의 너비 또는 위치를 조작하는 것과는 대조적으로 완전히 새로운 규칙 세트입니다.

실제로 플로트는 에스컬레이터를 타는 역학과 매우 유사하며 명확한 속성과 함께 사용하여 div 내에서 명확한 관계를 만드는 방법을 보여 드리겠습니다. 이렇게하면 다음에 코드에서 float를 사용할 때 놀라운 일이 발생하지 않습니다.

패스 레인을 존중해야합니다

요소의 기본 흐름은 위 그림과 비슷합니다. 어떤 사람은 난간에 손을 대고 가운데에 서 있습니다. 그는 전체 에스컬레이터를 굽고 있습니다. 아무도 그를 통과시킬 수 없습니다. 에스컬레이터 예절이 정말 좋지 않아요

그는 똑같은 일을하는 다른 사람들의 뒤에 서 있기 때문에 아무도 그들을 통과 할 수 없습니다. 차선이나 기본 인간 디케이시의 개념은 없습니다.

float를 전혀 사용하지 않는 경우의 시나리오입니다.

좋아, 지금 얘기하고있어! 어느 정도 수준의 인식을 보이는 사람들. 그것을보고 싶어요.

왼쪽에 하나의 차선이 있고 오른쪽에 다른 차선이 있습니다. 다른 사람들은 여전히 ​​서있는 두 사람을 쉽게 움직일 수 있으며 원하는 경우 에스컬레이터를 더 빨리 걸을 수 있습니다. 아무도 가운데에 서서 흐름을 막고 있지 않습니다.

이것은 div에서 float를 사용할 때의 시나리오입니다. 왼쪽 흐름과 오른쪽 흐름이 있으며 플로팅되지 않은 요소는 플로팅 된 요소가 차지하지 않는 공간을 쉽게 채울 수 있습니다.

수레 : 왼쪽과 오른쪽

플로트를 사용하면 왼쪽과 오른쪽의 두 가지 새로운 흐름이 생길 수 있습니다.

그리고 이것은 플로트 값이없는 요소의 정상적인 흐름이이 요소 주위의 공간을 채울 수있게합니다.

플로트를 사용하면 흐름간에 이러한 새로운 관계를 만들 수 있습니다.

엘리베이터 중간에 한 줄의 사람들이 서 있다면 새로운 구조물에 대한 옵션이 제한적입니다. 그러나 왼쪽과 오른쪽 열이있을 때 갑자기 특정 사람들이 오른쪽에 서 있고 다른 사람들은 왼쪽에 있고 다른 그룹은 그 차이를 채울 수 있다고 지정할 수 있습니다.

float 속성은 또한 요소와 주변 요소와의 관계를 나타 내기 때문에 더 읽기 쉽고 이해하기 쉬운 코드를 만들 수 있습니다.

명확한 재산

아직 논의하지 않은 주름이 하나 더 있습니다. "클리어"를 사용하면 요소가 부동 요소와 비교하여 정렬해야하는 위치를 지정할 수 있습니다.

"플로트"섹션의 첫 번째 그림에서 두 에스컬레이터 라이더는 에스컬레이터 양쪽에 정중하게 서있었습니다. 이를 통해 다른 사람들이 원하는대로 통과하고 자유롭게 이동할 수 있습니다.

플로팅 된 왼쪽 요소 하나와 플로팅 된 오른쪽 요소 하나 대신 오른쪽에 3 개의 플로팅 된 왼쪽 요소와 1 개의 플로팅 된 요소가 있다고 가정하겠습니다. 떠 다니는 3 개의 왼쪽 요소는 "clear : left"속성도 제공하면 왼쪽의 줄에 쌓입니다. 그러나 플로팅 된 오른쪽 요소와 가로로 정렬되는 경우 요소의 정상적인 흐름이 통과하기가 매우 어렵거나 불가능할 수 있습니다.

"Clear : left"는 왼쪽에 떠있는 각 사람에게 왼쪽에 떠있는 첫 번째 요소 뒤에 정렬해야한다는 것을 알려줍니다. 하단 두 사람의 크기에 따라 모든 일반 요소가 오른쪽 상단의 공간을 꽉 쥐고 차지하는 것이 어려울 수 있습니다. 따라서 좋은 에스컬레이터 관행조차도 여전히 막힐 수 있습니다.

투명 재산의 가장 빈번한 사용 중 하나는 "clear : both"입니다. 이를 통해 오른쪽, 왼쪽 및 정상 흐름을 계속 유지하는 것과 달리 요소 흐름을 재설정 할 수 있습니다. 가방을 가져 와서 전체 공간을 차지하는 에스컬레이터의 사람과 비슷합니다.

"clear : both"를 사용하면 한 남자가 가방을 향한 위치에 상관 없습니다. 누가 그에게 왼쪽이나 오른쪽에 서 있는지는 중요하지 않습니다. 그는 여전히 전체 에스컬레이터를 차단하고 있습니다. 그를 쫓는 사람들은 새로운 요소 흐름을 시작해야 할 것이며, 여기에는 왼쪽, 오른쪽 또는 정상의 세 가지 흐름 중 하나가 포함될 수 있습니다.

그는 3 흐름 시스템을 벗어나 규칙을 재설정했습니다. 에스컬레이터를 가동하려는 사람들에게 나쁜가요? 확실한. 그러나 누군가가 지나가는 것을 막고 싶다면 좋습니다.

에스컬레이터의 중간에, 같은 일을하는 사람들의 선 뒤에 서 있던 처음의 신사와 다른 점에 주목하십시오. 그것은 한 흐름 시스템이었습니다. "Clear : both"는 최대 3 개의 흐름이있을 수 있으며 다음 요소의 통과를 차단합니다.

이 게시물을 즐겼다면 포지셔닝, Model-View-Controller 및 콜백과 같은 CSS 및 JavaScript 주제에 대한 다른 설명도 즐길 수 있습니다.

그리고 이것이 당신과 같은 위치에있는 다른 사람들을 도울 수 있다고 생각한다면,“마음”을주십시오!

이 게시물은 원래 CodeAnalogies 블로그에 게재되었습니다.