레이아웃
float
요소 주위로 콘텐츠가 감싸는 방식을 제어하는 유틸리티입니다.
| Class | Styles |
|---|---|
float-right | float: right; |
float-left | float: left; |
float-start | float: inline-start; |
float-end | float: inline-end; |
float-none | float: none; |
예제
요소를 오른쪽으로 띄우기
float-right 유틸리티를 사용해 요소를 컨테이너의 오른쪽으로 띄울 수 있습니다:
아마도 우리 같은 사람들은 도서관 없이도 살 수 있을지 모릅니다. 어쩌면요. 물론, 우리는 세상을 바꾸기에는 너무 늙었지만, 지금 이 순간 지역 도서관 지점에서 책을 펼치고 앉아 있는 그 아이는 어떨까요? 고양이 모자를 쓴 고양이와 다섯 중국 형제의 그림에서 오줌과 똥 그림을 발견하는 그 아이 말입니다. 그 아이는 더 나은 것을 받을 자격이 있지 않을까요? 보세요. 만약 여러분이 이것이 연체료와 분실된 책에 관한 것이라고 생각한다면, 다시 생각해보세요. 이것은 그 아이가 마음이 뒤틀리지 않고 책을 읽을 권리에 관한 것입니다! 아니면: 어쩌면 그것이 당신을 흥분시키는 것일 수도 있습니다, 세인펠드; 어쩌면 그것이 당신이 즐기는 방식일 수도 있습니다. 당신과 당신의 좋은 친구들.
<article> <img class="float-right ..." src="/img/mountains.jpg" /> <p>아마도 우리 같은 사람들은 도서관 없이도 살 수 있을지 모릅니다. ...</p></article>요소를 왼쪽으로 띄우기
float-left 유틸리티를 사용해 요소를 컨테이너의 왼쪽으로 띄울 수 있습니다.
아마도 우리 같은 사람들은 도서관 없이도 살 수 있을지 모릅니다. 어쩌면요. 물론, 우리는 세상을 바꾸기에는 너무 늙었지만, 지금 이 순간 지역 도서관 지점에서 책을 펼치고 앉아 있는 그 아이는 어떨까요? 그 아이가 '고양이와 모자'나 '다섯 중국 형제' 책에서 오줌과 똥 그림을 발견한다면요? 그 아이는 더 나은 것을 받을 자격이 있지 않을까요? 이게 연체료나 잃어버린 책에 관한 문제라고 생각한다면, 다시 생각해보세요. 이건 그 아이가 마음이 왜곡되지 않고 책을 읽을 권리에 관한 문제입니다! 아니면, 어쩌면 이런 이야기가 당신을 흥분시키는 걸지도 모르죠, 세인펠드. 어쩌면 당신과 당신의 친구들이 이런 걸로 즐거움을 느끼는 걸지도요.
<article> <img class="float-left ..." src="/img/mountains.jpg" /> <p>아마도 우리 같은 사람들은 도서관 없이도 살 수 있을지 모릅니다. ...</p></article>논리적 속성 사용하기
텍스트 방향에 따라 왼쪽 또는 오른쪽으로 매핑되는 논리적 속성을 사용하는 float-start와 float-end 유틸리티를 활용하세요:
왼쪽에서 오른쪽
아마도 우리는 도서관 없이도 살 수 있을지 모릅니다. 당신과 같은 사람들 말이죠. 아마도. 물론, 우리는 세상을 바꾸기에는 너무 늙었지만, 지금 도서관 지점에 앉아 책을 펼치고 있는 그 아이는 어떨까요? 그 아이가 '고양이와 모자'나 '다섯 중국 형제'에 그려진 오줌과 똥 그림을 발견한다면 어떨까요? 그 아이는 더 나은 것을 받을 자격이 있지 않을까요? 생각해보세요. 만약 이 문제가 연체된 벌금이나 잃어버린 책에 관한 것이라고 생각한다면, 다시 한 번 생각해보세요. 이 문제는 그 아이가 마음이 뒤틀리지 않고 책을 읽을 권리에 관한 것입니다. 아니면, 어쩌면 이게 당신을 흥분시키는 것일 수도 있죠, 세인펠드. 어쩌면 이게 당신이 즐기는 방식일지도 모릅니다. 당신과 당신의 좋은 친구들 말이죠.
오른쪽에서 왼쪽
ربما يمكننا العيش بدون مكتبات، أشخاص مثلي ومثلك. ربما. بالتأكيد، نحن أكبر من أن نغير العالم، ولكن ماذا عن ذلك الطفل الذي يجلس ويفتح كتابًا الآن في أحد فروع المكتبة المحلية ويجد رسومات للتبول والبول على القطة في القبعة والإخوة الصينيون الخمسة؟ ألا يستحق الأفضل؟ ينظر. إذا كنت تعتقد أن الأمر يتعلق بالغرامات المتأخرة والكتب المفقودة، فمن الأفضل أن تفكر مرة أخرى. يتعلق الأمر بحق ذلك الطفل في قراءة كتاب دون أن يتشوه عقله! أو: ربما يثيرك هذا يا سينفيلد؛ ربما هذه هي الطريقة التي تحصل بها على ركلاتك. أنت ورفاقك الطيبين.
<article> <img class="float-start ..." src="/img/mountains.jpg" /> <p>아마도 우리는 도서관 없이도 살 수 있을지 모릅니다. 당신과 같은 사람들 말이죠. ...</p></article><article dir="rtl"> <img class="float-start ..." src="/img/mountains.jpg" /> <p>... ربما يمكننا العيش بدون مكتبات، أشخاص مثلي ومثلك. ربما. بالتأكيد</p></article>플로트(floating) 비활성화
엘리먼트에 적용된 플로트를 초기화하려면 float-none 유틸리티를 사용하세요:
아마도 우리 같은 사람들은 도서관 없이도 살 수 있을지 모릅니다. 어쩌면요. 물론, 우리는 세상을 바꾸기에는 너무 늙었지만, 지금 이 순간 지역 도서관에서 책을 펼치고 있는 그 아이는 어떨까요? 고양이와 모자나 다섯 중국 형제 그림에 오줌싸개 그림이 그려져 있는 걸 발견한다면요? 그 아이는 더 나은 것을 받을 자격이 있지 않을까요? 생각해보세요. 이게 연체료나 분실된 책에 관한 문제라고 생각한다면, 다시 한 번 생각해보세요. 이건 그 아이가 마음이 왜곡되지 않고 책을 읽을 권리에 관한 문제입니다! 아니면, 어쩌면 이런 게 당신을 흥분시키는 걸지도 모르죠, 세인펠드. 어쩌면 그게 당신이 즐기는 방식일지도요. 당신과 당신의 즐거운 친구들 말이에요.
<article> <img class="float-none ..." src="/img/mountains.jpg" /> <p>아마도 우리 같은 사람들은 도서관 없이도 살 수 있을지 모릅니다. ...</p></article>반응형 디자인
접두사 a float 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<img class="float-right md:float-left" src="/img/mountains.jpg" />변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
