요소를 하단 모서리에 둡니다

텍스트가 주위를 감싸도록 오른쪽 또는 왼쪽에 요소를 배치해야합니까? 플로트 속성에 대한 쉬운 작업입니다. 그러나 우리가 그 요소 (이미지라고 부르 자)를 바닥 모서리 중 하나로 밀고 싶다면 어떨까요? 조금 까다로워요? 아마도 JavaScript가 필요합니까?

아니, (까다로운) CSS의 몇 줄은 그것을 할 수 있습니다! 다음은 크기와 내용에 관계없이 이미지가 하단 모서리를 고수하게 만드는 CSS 전용 솔루션입니다.

래퍼 요소를 조정하고 직장에서 마법을보십시오.

코드를 해부합시다.

마크 업 및 레이아웃

모든 것을 포함하려면 래퍼 요소가 필요하며 Flexbox를 사용할 것입니다. Flexbox를 사용하면 기본 스트레치 정렬에 의존하여 나중에 높이를 사용할 수 있습니다 : 100%.

 <div>
  <div>
    <div> <img  alt="요소를 하단 모서리에 둡니다" > </div>
    Lorem Ipsum Dolor ...
  </div>
</div>

 .wrapper {
  디스플레이 : Flex;
}

.뜨다 {
  플로트 : 오른쪽;
  높이 : 100%;
  디스플레이 : Flex;
  정렬 구조 : 플렉스 엔드;
  모양 아웃 사이드 : 삽입 (calc (100% -100px) 0 0);
}

.wrapper 내의 .box는 Flex 항목입니다. 우리는 상자에 적용되는 특정 CS가 필요하지 않습니다. 래퍼의 높이를 정의하고 동시에 같은 높이까지 뻗어 있습니다. 이 동작은 우리에게 어린이 요소가 사용할 수있는 "기준 높이"를 제공합니다.

사양에서 :

Flex 항목에 정렬 된 SELF : Stretch, Redo 레이아웃이 내용물에 대한 레이아웃을 사용 하여이 중고 크기를 명확한 크기로 취급하여 백분율 크기의 어린이를 해결할 수 있습니다.

키워드는 명확한 것이므로 상자 요소 내부에서 비율 (%) 높이를 안전하게 사용할 수 있습니다.

이제 떠 다니는 요소를 위해

우리의 .float 요소는 위에서 자세히 설명한 높이 계산 덕분에 텍스트 내용 옆의 전체 높이를 차지 합니다. 이 요소 내에서 Flexbox 정렬을 사용하여 이미지를 바닥으로 밀어 넣습니다.

이제 실제 속임수를 위해서는 모양 외부 속성을 사용합니다. MDN이이를 정의하는 방법은 다음과 같습니다.

Shape Outside CSS 속성은 인접한 인라인 컨텐츠가 래핑 해야하는 횡장이 아닌 모양을 정의합니다. 기본적으로 인라인 컨텐츠는 마진 상자 주위를 감싸고 있습니다. Shape Outside는이 랩핑을 사용자 정의하는 방법을 제공하여 간단한 상자가 아닌 복잡한 객체 주위에 텍스트를 랩핑 할 수 있습니다.

다시 말해, Shape Outside는 요소의 경계 상자 주위에 컨텐츠가 흐르는 방식을 설정합니다.

여러 값이 필요합니다. 그 중 하나는 MDN에 따라 inset () 함수입니다.

삽입 된 사각형을 정의합니다. 처음 4 개의 인수가 모두 제공되면 참조 상자에서 삽입 된 사각형의 가장자리의 위치를 ​​정의하는 상단, 오른쪽, 하단 및 왼쪽 오프셋을 나타냅니다.

따라서 Shape Outside : Inset (calc (100% -x) 0 0)를 사용하여 이미지 상단에서 정확히 시작하는 삽입 된 사각형을 만들 수 있습니다. 상단은 100% -x와 같으며 여기서 x는 이미지 높이이고 100%는 .float 요소의 높이입니다. 이를 통해 텍스트가 이미지 상단의 여유 공간 내에서 포장 할 수 있습니다. 이것은 반응이 좋으며 왼쪽과 오른쪽으로 쉽게 전환 할 수 있습니다 (플로트 속성을 조정하여)

그게 다야! 유일한 주요 경고는 이미지 높이를 알아야한다는 것입니다.

마크 업을 최적화합시다

코드를 약간 최적화하고 이미지 주변의 추가 래퍼를 제거 할 수 있습니다.

 <div>
  <div>
    <img  alt="요소를 하단 모서리에 둡니다" >
    Lorem Ipsum Dolor ...
  </div>
</div>

그러면 우리의 CSS가 될 것입니다

 .wrapper {
  디스플레이 : Flex;
}

.뜨다 {
  플로트 : 오른쪽;
  높이 : 100%;
  너비 : 100px;
  모양 아웃 사이드 : 삽입 (calc (100% -100px / *높이 * /) 0 0);
  객체 적합 : 포함;
  객체 위치 : 하단;
}

여분의 래퍼를 제거 했으므로 이미지를 하단 모서리에 배치하려면 다른 기술이 필요합니다. 이를 위해 객체 적합 및 객체 위치를 사용하고 있지만 이미지의 너비를 명시 적으로 지정해야합니다.

이 방법을 사용하면 높이 만 필요한 이전 코드와 달리 이미지의 너비와 높이를 모두 알아야합니다.

더 원하십니까?

우리는 더 멋진 상황을 설명하기 위해이 개념을 조금 더 확장 할 수 있습니다. 예를 들어, 우리는 이미지를 오른쪽으로 묶을 수 있지만 정당화 - 컨텐츠 : 중심으로 상자 중간에 고정 할 수 있습니다. 또한 삽입 (calc (100% -x) 0 0)에서 삽입 (calc (50% - x/2) 0 0)에서 모양 외부를 변경하여 삽입 사각형을 중간으로 조정하십시오.

우리는 또한 두 바닥 모서리에 두 개의 이미지를 떠올리도록 할 수 있습니다.

여기에 복잡한 것은 없습니다. 나는 단순히 같은 떠 다니는 요소를 오른쪽에 한 번, 왼쪽에 다시 두 번 사용하고 있습니다. 그리고 4 개의 구석에 이미지를 놓을 수있을 때 두 모서리에서 멈추는 이유는 다음과 같습니다.

동일한 기본 아이디어가 여기에서 진행되고 있지만, 우리는 또한 상단 이미지의 공통 플로트 기능에 의존하고 있습니다. 그러나 이것은 개념이 약간 분해되기 시작하는 곳이라는 것을 알 수 있으며, 우리는 포함 된 상자의 크기에 따라 원치 않는 오버플로를 얻습니다. 우리는 .float 요소의 높이를 100%보다 크게 만들고 이미지의 패딩과 마진을 조정하여 부드럽게하는 "마법 숫자"를 적용 할 수 있습니다.

Shape Outside가 Radial-Gradient ()를 값으로 받아 들인다는 것을 알고 있습니까? 이를 사용하여 아래와 같은 둥근 이미지를 배치 할 수 있습니다.

그라디언트의 투명한 부분은 텍스트가 갈 수있는 여유 공간입니다. 당신은 우리가 이미지에도 국경 래디 우스를 적용했다는 것을 알았을 것입니다. 모양 아웃 사이드 속성은 단순히 .float 요소에 영향을 미치며 형상 외부로 정의 된 모양을 따라 이미지의 모양을 수동으로 조정해야합니다.

우리가 그것을하는 동안, 정당화-컨텐츠 : 중앙을 사용하여 이미지를 상자의 수직 중앙에 핀으로 묶는 이전 예제와 이것을 결합합시다.

또 다른 방사형 그레이드 () 및 또 다른 테두리-라디우스 구성.

우리는 대신 래핑 영역의 삼각형 모양을 만들기 위해 선형 그레이드 ()를 사용했을 수 있습니다.

이것은 우리가 방사형 그라디언트 ()에 사용한 것과 같은 아이디어입니다. 가장 큰 차이점은 우리가 이미지를 자르기 위해 테두리-라디우스 대신 클립 경로를 사용한다는 것입니다.

그리고 우리가 다른 사람들을 위해 그것을했기 때문에, 정당화-컨텐츠 : 중심 아이디어를 사용하여 이미지를 상자의 오른쪽 가장자리의 수직 중심에 고정시킵니다.

우리는 위의 데모에서 형상 외부에서 원뿔형 그레이드 ()를 사용하여 삼각형 모양과 클립 경로를 정의하여 이미지에서 비슷한 모양을 얻었습니다.

이러한 모든 예제는 이미지가 장식적인 경우 (SEO 목적으로 HTML 내부에 필요하지 않은 경우) 코드를 적게 사용하여 최적화 할 수 있습니다. .float 요소를 의사 요소로 바꾸고 대신 이미지를 배경으로 적용합시다.

우리는 마스크를 사용하여 필요한 이미지의 일부만 표시하고 Shape Outside와 동일한 값을 사용하는 것을 추측합니다! 따라서 우리가해야 할 일은 모양에 대한 하나의 값을 정의하는 것입니다.

그게 다야!

여기에는 사각형을 모서리에 배치 할뿐만 아니라 대부분의 위치에서 어떤 종류의 모양이든 크게 동일한 코드 구조를 사용하는 가능성이 여기에 있습니다. 우리는 다음과 같습니다.

• 모양을 정의하기 위해 모양 외부 속성을 조정하십시오
• 이미지에 일부 스타일을 적용하여 이전에 정의 된 모양을 따르 거나 의사 요소 버전을 사용하는 경우 마스크에 동일한 값을 적용하십시오.

그런 다음 모든 것이 반응 형 디자인으로도 위치합니다.

위 내용은 요소를 하단 모서리에 둡니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!