DIV가 다음 줄로 계속 접음

-1

주 컨테이너 안에 두 개의 div가 있습니다. 하나는 떠 다니는 왼쪽 (youtube 비디오)이고 다른 하나는 오른쪽 (soundcloud 플레이어)입니다.DIV가 다음 줄로 계속 접음

확대 (110 %) 오른쪽의 div 컨테이너가 아래쪽으로 접혀 다음 줄로 넘어갑니다.

어떻게 이런 일이 일어나지 않게 할 수 있습니까? CSS에서 뭔가를 놓치고 있습니까?

.youtube { 
    float: left; 
    width: 640px; 
    height: 360px; 
} 
.maincontainer { 
    position:relative; 
    margin-top: 1%; 
    margin-right: auto; 
    margin-left: auto; 
    max-width: 1900px; 
    height: 1000px; 
    padding-right: 10px; 
    padding-left: 10px; 
} 
.soundcloud { 
    float:right; 
    height:388px; 
    width:580px; 
    padding-right:50px; 
}

jsfiddle : http://jsfiddle.net/richirich/nZgw5/1/

감사합니다!

편집 : 알아 냈어. .maincontainer div에서 "max-width"를 사용하고있었습니다. 나는 그것을 변경하고 대신 "폭"을 사용했고, 이제 사운드 클 라우드 플레이어는 더 이상 다음 라인으로 떨어지지 않습니다. 그래서 해결되었습니다.

이것은 또 다른 질문으로 이어집니다 : 어떻게 % 또는 px를 사용하여 div의 차원을 정의할지 여부를 알 수 있습니까? 사람들이 나에게 상충되는 답변을 주었고 그저 나를 혼란스럽게 만들었습니다. 개인적으로 픽셀을 사용하면 상자를 확대하거나 축소 할 때 상자가 떨어져 표류하지 않는 데 도움이된다는 사실을 발견했습니다 ..

출처

2013-12-13 user3080167

여기에 의미있는 코드와 문제 설명을 추가하십시오. 수정이 필요한 사이트에 을 연결하면 안됩니다. 그렇지 않으면 문제가 해결되면이 방문자는 향후 방문자에게 어떤 값도 표시되지 않습니다. 문제를 나타내는 [짧은, 자체 포함, 올바른 예 (SSCCE)] (http://www.sscce.org/) 게시하면 더 나은 답변을 얻는 데 도움이됩니다. 자세한 내용은 [내 웹 사이트의 일부 기능이 작동하지 않습니다.를 참조하십시오. 에 대한 링크를 붙여 넣을 수 있습니까?] (http://meta.stackexchange.com/questions/125997/) 감사합니다. – j08691

좋아요, 내가 글을 편집했습니다. – user3080167

퍼팅을 포함 :

* { 
    margin:0; 
    padding 0; 
}

CSS 파일의 상단에 있습니다. 이렇게하면 여백과 패딩이 모두 재설정됩니다.

그게 작동하지 않으면 사이트의 전체 중간 섹션 (YouTube 비디오 및 텍스트 및 soundcloud 상자)을 포함하는 div 만들기 시도, 당신이 그것을 메인 컨테이너, 조금 더라고 생각했습니다. 어쩌면 너비에 10-15 픽셀을 추가하십시오. 공간이 부족할 수 있습니다.

희망이 도움이됩니다. 다음 번에 조금 더 많은 정보와 특정 코드를 게시 해보십시오.

출처

2013-12-13 19:31:18 mickzer

답장을 보내 주셔서 감사합니다. 내 게시물을 확인하고 업데이트했습니다. – user3080167

이러한 종류의 사이트의 경우 비율 대신 픽셀을 사용하는 것이 좋습니다. – mickzer

DIV가 다음 줄로 계속 접음

답변

관련 문제