테두리 확장

Question

왼쪽 가운데에 이미지가 있고 왼쪽 테두리가 없지만 오른쪽 테두리가 있습니다. 위쪽 테두리가 페이지의 맨 왼쪽에서 (이미지 지나서) 이동하고 오른쪽 테두리에서 멈추고 아래쪽 테두리가 이미지의 왼쪽 끝에서 시작하여 모든 테두리에서 늘릴 수 있는지 궁금합니다. 창 오른쪽으로. 위쪽 및 아래쪽 테두리는 두 개의 다른 반복되는 배경으로 이루어져 있으며 필요한 경우 왼쪽 테두리도있을 수 있습니다.

나는 이것에 대해 잠시 생각해 왔지만 어떤 해결책도 찾지 못했습니다 ... 누군가 나를 도울 수 있습니까?

Answer 1

당신이 얼마나 유연하게 기꺼이하는지 알고 싶을 수도 있습니다. 이 여러 가지 방법으로 접근 할 수 있습니다. 위쪽 및 아래쪽 테두리를 뷰포트 가장자리까지 확장하려면 (유체 너비가 필요함)?

background-position으로 배경 이미지를 사용하고 슬라이딩 도어 기술을 사용하여 처리하거나, 외부 마크 업을 사용하여 이미지를 중심으로 3 열 유체 폭 레이아웃을 만들 수 있습니다.

3 열 기술을 사용하는 경우 divs (또는 사용하고자하는 것은 무엇이든)을 JavaScript를 통해 삽입 할 수 있으므로 소스에 빈 컨테이너가 없으므로 border-top 및 배경 이미지 대신 border-bottom (따라서 페이지의로드 시간이 약간 줄어 듭니다).

편집 : 그리고 명확하게, 당신이이 아스키 그리기 같은 것을보고 싶지 :

_______________ 
       |img|_____________________ 

편집 : 유체 폭 레이아웃의 경우, CSS 레이아웃에 많은 다양한 원인 중 하나를 참조, http://www.smashingmagazine.com/2007/01/12/free-css-layouts-and-templates/

그런 다음 왼쪽과 오른쪽 컬럼에, 당신은 각각 border-top 및 border-bottom을 (또는 역 ©를 원하는 경우 배경 - 이미지를 사용하는 것입니다 : 여기 좋은 개요입니다 ier border), 이미지 테두리를 지정하고 세 개의 컨테이너 높이를 설정하여 테두리가 함께 표시되게하십시오. 희망이 도움이됩니다.