2012-10-11 3 views
0

HTML을 훈련하는 데 도움이 필요합니다. 그것은 위로 움직이고있는 것처럼 보인다.인라인 div가 권한을 청취하지 않습니다.

어쨌든, 내가 작업하고있는 페이지의 콘텐츠 영역에는 두 개의 열이 있습니다. 여러 열보기를 얻으려면 이 아닌 하나의 열을 포함하는 div를 사용하여 열의 "행"중 일부를 정렬해야하기 때문에

대신 기본적으로 행당 두 개의 인라인 div가있는 여러 개의 "행"을 사용합니다. 하나는 왼쪽 콘텐츠 용이고 다른 하나는 오른쪽 용입니다. 그들 중 대부분은 올바르게 작동하고 있습니다. 그러나 어떤 이유로 든 제 마지막 행은 아닙니다. 무엇을 상관없이 내가 폭을 줄 때 그것은 내 말을 듣지 않을 것입니다. 사업부는 폭 듣지 발생할 수있는 상황의 어떤 종류의 말은 시간에서

<div id="mainContainer"> 
    <div id="topBar"></div> //full width 
    <div id="featured">      //this "row" is working fine 
     <div id="featuredVideos"></div>   //these two 
     <div id="featuredLiterature"></div>  //are inline 
    </div> 
    <div id="browseButtons">     //this is the "row" that is acting up 
     <div id="litBrowse"></div>     //these two 
     <div id="vidBrowse"></div>     //are inline 
    </div> 
</div> 

: 여기

는와 관계있는 HTML의 모습입니까? 나는 심지어 모든 자식 div가 litbrowsevidbrowse1 안에 있고, 450px와 주사위가없는 것과 같은 넓이를 보냈다. 근본적으로 똑같은 구조를 가진이 모든 내용은 정상적으로 작동합니다. 유일한 차이점은 해당 행 위의 '행'이 두 개의 부동 div로 구성된다는 것입니다.


여기에 문제가있는 jsfiddle이 있습니다. 하단의 두 div (카테고리별로 점선 찾아보기, 카테고리별로 vids 찾아보기)는 간격을 두어야하지만 450px 너비를 가지지 않기 때문에 서로 겹쳐서 표시됩니다.

+3

#topBar에 닫는 태그가 누락 된 것 같습니다. – ratbum

+0

@ratbum 죄송합니다. HTML을 옮길 때 오타가 있습니다. 멋지다. 그 오타는 실제 html에는 없습니다. –

+0

마음에 샘솟는 주된 이유는 div가 예상 한대로 너비를받지 못했다는 것입니다. CSS 또는 잘못된 선택자에서 대소 문자를 구분할 수 있습니다. CSS가 오버라이드되는 경우에도 너비가 요소에 있어야한다고 CSS에서 판단하는지 여부를 개발자 도구로 확인 했습니까? 그리고 div는 확실히 어떤 이유로 div에서 벗어나는 내용과는 반대로 폭을 사용하지 않는 것입니까? – Chris

답변

3

.browseBtninline입니다. 인라인 요소는 너비를 사용하지 않고 블록 수준 요소 만 사용합니다.

대신 inline-block을 사용하면 원하는 것을 할 수 있습니다. div를 나란히 배치하고 너비를 지정할 수있을만큼 충분히 블록하는 것은 인라인입니다.

http://jsfiddle.net/abtFr/2/

+0

아! 너는 나를 때렸다. +1하고 좋은 눈. –

+0

@RoddyoftheFrozenPeas : 죄송합니다. 그 좋은 눈은 아니지만. 문제 요소를 벗어난 수업을 듣는다면 문제를 찾기 위해 많이 보지 않아도됩니다. :) – Chris

+0

좋은 캐치. 아름답게 일하고 있습니다. 감사. –

2

SECOND 편집를 참조 - 기타 디스플레이 사용하는 말을 응답 한 : 인라인 블록 대신 디스플레이의 : 인라인합니다. 인라인 블록은 IE7과 호환되지 않습니다. 그러나 인라인 블록을 사용하여 요소에

zoom:1; 
*display: inline; 

을 첨부하여 호환 가능하도록 만들 수 있습니다. IE6과 호환되도록하려면 높이를 지정해야합니다.

_height: [yourheight]px; 

밑줄은 IE6 만 대상으로합니다.

또는 요소를 왼쪽으로 떠올리게 할 수 있습니다.이 경우 원래 응답이 적절할 수 있습니다.

편집 - jsFiddle을 보지 않고 응답했습니다. 이 응답은 대체로 무시 될 수 있습니다.

부동으로 대답하면 요소가 일반 레이아웃에서 벗어납니다.div가 다른 div 내부에 떠 다니면 해당 컨테이너의 가장 왼쪽에 배치되지만 해당 div의 크기를 조정할 때 크기가 고려되지 않습니다. 즉, 내부에 div가없는 것처럼 컨테이너가 작동합니다.

이 문제를 해결하려면 부동 div 다음에 다른 (빈) div를 배치하고 배치 할 때 부동 div를 고려하도록 "clear : both"스타일을 할당해야합니다. 차례대로 컨테이너 div는 마지막으로 지워진 div를보고 크기를 고려하여 크기를 조정합니다.

또는 때때로 컨테이너 내부에서 삭제 된 div를 건너 뛰고 컨테이너 자체에 스타일 "overflow : hidden"을 추가 할 수 있습니다. 이것은 다소 해킹 된 것이지만 해킹만큼 견고합니다.

이렇게하면 문제가 해결됩니다. 그렇지 않으면 우리는 더 많은 정보를 기다려야 할 것입니다.

1

간단합니다. 예, div이지만 displayinline (.browseBtn 정의)로 정의합니다. 따라서 더 이상 블록 요소이 아니며 width 정의를 수신하지 않습니다.

I've corrected the fiddle하지만 다른 부작용이있을 수 있습니다.

관련 문제