블록: 영상
이미지 정렬에 오신 것을 환영합니다! 이 게시물을 알고 있다면, 이것은 고전에서 변환 된 블록이기 때문입니다 마크 업: 이미지 정렬 게시하다. 다양한 이미지 포지셔닝 옵션의 썰물과 흐름을 보여주는 가장 좋은 방법은 단어의 바다 사이에 껴안는 것입니다.. 패들을 잡고 시작합시다. RTL 모드에서 시도하십시오. 왼쪽은 왼쪽으로, 오른쪽은 양쪽 읽기 방향에 대해 오른쪽으로 유지해야합니다..
정렬 주제, 사용자는 다음 옵션 중에서 선택할 수 있습니다. 없음, 왼쪽, 권리, 과 센터. 테마에 대한 지원이 추가 된 경우 넓게 정렬, 이미지는 또한 넓은 과 전체 넓이. RTL 모드에서이 페이지를 테스트하십시오..
게다가, 그들은 또한 이미지 크기의 옵션을 얻습니다 25%, 50%, 75%, 100% 또는 설정된 너비와 높이.
위의 이미지는 중심.
이 단락의 나머지 부분은 150을 둘러싼 텍스트를보기위한 필러입니다.×150 영상, 그것은 왼쪽 정렬.
보시다시피 위에 약간의 공간이 있어야합니다., 이하, 이미지 오른쪽에. 텍스트가 이미지에서 크립하지 않아야합니다.. 크리핑은 옳지 않습니다. 이미지에도 호흡 공간이 필요합니다.. 그들이 당신의 말처럼 말하게하십시오. 텍스트에서 번거 로움없이 작업을 수행 할 수 있습니다.. 여기에 한 문장 더, 텍스트가 이미지 오른쪽에서 이미지 아래로 원활하게 전환되는 것을 볼 수 있습니다.. 다시, 시키는 것은 고맙습니다. 임무 완수!
그리고 지금 엄청나게 큰 이미지. 또한 갖는다 정렬 없음.
위의 이미지, 너비 1200px이지만, 콘텐츠 영역을 넘치지 않아야합니다.. 콘텐츠 흐름에 눈에 띄는 중단없이 격리되어 있어야합니다..
이제 우리는 일을 오른쪽 정렬. 다시, 위에 충분한 공간이 있어야합니다, 이하, 이미지 왼쪽에. 저기 저기 봐… 이봐! 오른쪽을 흔드는 방법. 왼쪽 정렬 된 이미지가 뭐라고하든 상관 없어요, 너 멋져 보여. 다른 사람이 다르게 말하지 않도록하십시오.
여기서 조금만, 텍스트가 오른쪽 정렬 된 이미지 아래로 감싸기 시작하고 멋지게 자리 잡아야합니다.. 여전히 충분한 공간이 있어야하고 모든 것이 예쁘게 앉아 있어야합니다.. 그래 ... 그대로. 옳다는 것이 그렇게 기분이 좋지 않았습니다..
그리고 우리가 끝났다고 생각했을 때, 캡션과 함께 다시 할 것입니다.!
위의 이미지는 중심. 캡션에도 링크가 있습니다., 펑키 한 일이 있는지 확인하기 위해.
이 단락의 나머지 부분은 150을 둘러싼 텍스트를보기위한 필러입니다.×150 영상, 그것은 왼쪽 정렬.
보시다시피 위에 약간의 공간이 있어야합니다., 이하, 이미지 오른쪽에. 텍스트가 이미지에서 크립하지 않아야합니다.. 크리핑은 옳지 않습니다. 이미지에도 호흡 공간이 필요합니다.. 그들이 당신의 말처럼 말하게하십시오. 텍스트에서 번거 로움없이 작업을 수행 할 수 있습니다.. 여기에 한 문장 더, 텍스트가 이미지 오른쪽에서 이미지 아래로 원활하게 전환되는 것을 볼 수 있습니다.. 다시, 시키는 것은 고맙습니다. 임무 완수!
그리고 지금 엄청나게 큰 이미지. 또한 갖는다 정렬 없음.
위의 이미지, 너비 1200px이지만, 콘텐츠 영역을 넘치지 않아야합니다.. 콘텐츠 흐름에 눈에 띄는 중단없이 격리되어 있어야합니다..
이제 우리는 일을 오른쪽 정렬. 다시, 위에 충분한 공간이 있어야합니다, 이하, 이미지 왼쪽에. 저기 저기 봐… 이봐! 오른쪽을 흔드는 방법. 왼쪽 정렬 된 이미지가 뭐라고하든 상관 없어요, 너 멋져 보여. 다른 사람이 다르게 말하지 않도록하십시오.
여기서 조금만, 텍스트가 오른쪽 정렬 된 이미지 아래로 감싸기 시작하고 멋지게 자리 잡아야합니다.. 여전히 충분한 공간이 있어야하고 모든 것이 예쁘게 앉아 있어야합니다.. 그래 ... 그대로. 옳다는 것이 그렇게 기분이 좋지 않았습니다..
여분의 넓은 이미지에 대한 용도를 찾을 수 있다고 상상해보십시오.! 이 이미지에는 폭 넓은 조정:
더 크게 갈 수 있을까? 이 이미지에는 전체 넓이 조정:
그리고 그게 끝입니다, 나는! 당신은 격동의 물가에서 살아 남았습니다.. 이미지 정렬 업적 잠금 해제! 마지막 한가지: 이 게시물 콘텐츠의 마지막 항목은 오른쪽으로 떠있는 미리보기 이미지입니다.. 콘텐츠가 제대로 지워진 후 모든 요소를 확인하십시오..