CSS : 오른쪽 래퍼가 페이지 끝에서 벗어납니다.

올바른 래퍼가 사이트 아래로 계속 떨어지는 곳에서 작업하고있는 사이트에 문제가 있습니다. 분명히 나는 그것을 오른쪽에 머물고 싶다.CSS : 오른쪽 래퍼가 페이지 끝에서 벗어납니다.

필자는 내 문제를 보여주는 테스트 사례를 작성했으며 더 좋은 방법이 있는지 궁금합니다.

웹 사이트 URL이 다음 http://www.musicworkshop.co.nz/

내 문제의 원인 (내가 생각하는) 테스트 케이스는, 그러나 그것은하지 않을 수 있습니다. 핑크색 상자가 페이지 너비에 맞지 않으면 드롭 다운됩니다.

필자는 올바른 래퍼의 스크린 샷과 함께 달성하고자하는 다이어그램을 포함 시켰습니다.

더 좋은 방법이 있나요?

존

<html> 
    <head> 
     <title> Test page </title> 
     <link rel="stylesheet" href="test.css" type="text/css" /> 
    </head> 
    <body> 
     <div id="superbox"> 
      <div id="box1"> 
      </div> 
      <div id="box2"> 
      </div> 
      <div id="box3"> 
      </div> 
      <div id="box4"> 
      </div> 
      <div id="box5"> 
      </div> 
      <div id="box6"> 
      </div> 
     </div> 
    </body> 
</html> 

#superbox{ 
    width: 1000px; 
    height: 100px; 
    margin: 0 auto; 
} 

#box1{ 
    height: 100px; 
    width: 200px; 
    background: red; 
    float: left; 
} 

#box2{ 
    height: 100px; 
    width: 200px; 
    background: yellow; 
    float: left; 
} 

#box3{ 
    height: 100px; 
    width: 200px; 
    background: blue; 
    float: left; 
} 

#box4{ 
    height: 100px; 
    width: 200px; 
    background: green; 
    float: left; 
} 

#box5{ 
    height: 100px; 
    width: 200px; 
    background: grey; 
    float: left; 
} 

#box6{ 
    height: 100px; 
    width: 200px; 
    background: pink; 
    float: left; 
}

alt text http://www.musicworkshop.co.nz/website.png

alt text http://www.musicworkshop.co.nz/website_right-wrap-missing.png

출처

2010-06-16 John Deverall

내 대답은 내 사이트에 대한 해결책이라고 생각하는 것으로 업데이트되었습니다. 그렇지 않으면 의견을 게시하여 수정할 수 있도록하십시오. 그렇다면 허용 된 답변으로 표시하는 "진드기"를 치십시오. –

모든 박스 200 픽셀이 넓은 % 가야하기 때문에.

출처

2010-06-16 06:41:58 Saurabh

내가 제시 한 예제에 대한 좋은 제안이지만 실제 사이트에는 적용되지 않습니다. 내 테스트 예제가 충분히 정확하지 않았던 것 같습니다. 내 질문에 실제 사이트의 스크린 샷을 추가하겠습니다. –

페이지 너비에 맞지 않으면 플로트가 작동합니다 ... 한 줄에 상자를 넣고 싶다면 수퍼 박스를 모든 상자와 함께 설정하십시오. 200 * 6 = 1200/1000이 아님).

출처

2010-06-16 06:44:19 oezi

이 솔루션을 직접 생각했지만 시도했지만 작동하지 않았습니다. 내가 이것을 시도하면 상자 목록이 가로로 표시되지 않고 화면 아래로 세로로 나열됩니다. 이 일이 당신이 원하는 일이 아닌가요? –

편집 :

이 예를 들어 사이트에서 찾고은 내가 viewwindow 당신이 DIV 오프 화면을 이동하려는 작은 때 의미 생각합니다. 귀하의 경우에 가장 좋은 해결책은 반복되는 이미지를 신체의 배경 이미지로 만드는 것입니다. 같은

뭔가 :

body { background: #6593aa url('http://www.musicworkshop.co.nz/templates/musicworkshop/images/right_repeater.png') repeat-x; }

그리고 다른 div가 떨어져 배경을해야합니다. 올바른 세그먼트가 아닌 반복 할 이미지를 선택하는 것이 좋습니다. 헤더와 잘 어울리도록 노력하고있는 것을 볼 수 있습니다. 그러나 당신이 그것에 대해 어떻게 생각하는지는 제대로 작동하지 않을 것입니다. 가장 좋은 해결책은 왼쪽 랩에 투명한 배경을 사용하고 헤더 근처에 오른쪽으로 감싸는 것입니다 (백그라운드에서 "진폭 파형"비트가있는 현재 이미지가 아닌 둥근 모서리에 투명도가있는 .gif 또는 .png 사용).

요약 :

모두 제거 래퍼 등을 배경.
"둥근 모서리"이미지를 투명 배경으로 변경하십시오.
"반복"div를 삭제하십시오.
위의 CSS를 본문에 적용하십시오.원래

원하는 행동이 무엇입니까? 수퍼 박스가 1200px로 이동하려면? 불행히도 고정 된 크기와 "자동 성장"을 가질 수는 없습니다.

'superbox'가 자녀에게 맞게 자라도록하려면 너비를 지정하지 마십시오 (예 : 너비 : 자동으로 둡니다).

'수퍼 박스'에 비해 너무 큰 경우 어린이의 크기를 조정하려는 경우 비율을 사용하십시오.

상자가 현재 크기를 유지하고 줄 바꿈하지 않도록하려는 것 같습니다. 그럼 당신이 '수퍼 박스'아래에 새로운 div를 넣고 너비가 1200px 인 상자를 포장하면 어떻게 될지 상상해보십시오. 그것은 '슈퍼 박스'가 그 주위를 감쌀 수있게 만들 것입니다. 그래서 하루가 끝날 때, 처음에는 '슈퍼 박스'를 이보다 더 넓은 너비로 만들 수도 있습니다!

출처

2010-06-16 06:49:39

예, 내 테스트 케이스를 무시하면 내 문제가 아닐 수도 있습니다. 나는 내 문제가 실제로 무엇인지 알지 못한다. www.musicworkshop.co.nz를 보면 머리말에 둥근 끝이 없음을 알 수 있습니다 (또는 잘만 보일 것입니다). 또한 왼쪽 및 오른쪽 중계기가 일직선 상에 있지 않습니다. 나는 원래 게시에서 내가 목표로 삼은 이미지를 추가했습니다. –

제 CSS 예제는 repeater div를 사용하지 않고 본문 배경을 사용하여 찾고있는 것을 달성합니다. –

"요약"비트를보고 혼란 스럽거나 필요한 것을하지 않는 경우 알려주십시오. –

CSS : 오른쪽 래퍼가 페이지 끝에서 벗어납니다.

답변

관련 문제