CSS 세로 정렬 및 인라인 블록 문제

3 열 레이아웃이 모두 같은 높이 (높이를 미리 알 수 없으므로 높이에 하드 코드 된 값을 지정할 수 없음)를 만드는 중입니다. 여기에 설명 된 기술을 사용하여 :CSS 세로 정렬 및 인라인 블록 문제

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

내가 사용하려는 다소 때문에이 방법을 변경하고 "를 표시 : 인라인 블록"대신 "플로트 : 왼쪽". 내가 사용하고있는 코드는 다음과 같습니다.

내가 겪고있는 문제는 인라인 블록이 제대로 작동하지 않는 것입니다. 즉, 각 3 개의 div가 나란히 배치되어 있기 때문입니다. 아무도 왜 이것이 작동하지 않는지 설명 할 수 있습니까?

#col1 { 
    width:33.33333333%; 
    vertical-align: top; 
    margin-left: 66.66666667%; 
    display: inline-block; 
} 

#col2 { 
    width:33.33333333%; 
    vertical-align: top; 
    margin-left: 100%; 
    display: inline-block; 
} 

#col3 { 
    width:33.33333333%; 
    vertical-align: top; 
    margin-left: 133.33333333%; 
    display: inline-block; 
} 

#container3 { 
    width: 100%; 
    margin-left: 0%; 
    background-color: green; 
    overflow:hidden; 
} 

#container2 { 
    width: 100%; 
    margin-left: -33.33333333%; 
    background-color: yellow; 
} 

#container1 { 
    width: 100%; 
    margin-left: -33.33333333%; 
    background-color: red; 
}

가 여기 내 실제 HTML이다 :

여기 내 CSS입니다

<!doctype html> 
<html> 
<head> 
    <title>My Sample Columns</title> 
    <link rel="stylesheet" type="text/css" href="styles.css"> 
</head> 
<body> 
    <div id="container3"> 
     <div id="container2"> 
      <div id="container1"> 
       <div id="col1"> 
        one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one 
       </div> 
       <div id="col2"> 
        two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two 
       </div> 
       <div id="col3"> 
        three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three 
       </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

출처

2015-01-07 Joe

너비 33 %가 모든 브라우저에서 작동하지 않습니다. 33 % 미만이어야합니다. 브라우저가 폭을 계산하는 방법에 따라 덜 좌우됩니다. 일반적으로 여백이없는 경우 32 %가 작동합니다. – Misunderstood

문제를 올바르게 설명했다고 생각하지 않습니다. 기둥이 서로 겹치지 않아 나란히 있습니다. col2의 텍스트는 col1 텍스트가 끝나는 곳에서 시작합니다. 그리고 col 3과 동일합니다.

작동하지 않는 이유는 col2와 col3 여백이 페이지의 왼쪽으로 확장되기 때문입니다.

col2 여백은 col1의 텍스트를 밀어 넣을 수 없으므로 텍스트 아래로 가야 왼쪽으로 갈 수 있습니다. col3와 동일하지만 추가로 col2 텍스트를 통과 할 수 없습니다. col2의 텍스트를 제거하면 col3의 맨 위에 정렬됩니다.

FireFox 또는 Chrome에서 직접 확인하고 싶습니다. COL2 텍스트 이상

넣고 커서 바로
이 요소를 검사 선택을 클릭합니다.
Chrome의 Elements 탭 또는 FireFox의 Inspector Tab에서 개발자 윈도우로 커서를 이동하고 HTMLcol2 및 col3에 커서를 이동하십시오.
상위 레이어의 내용을 확장해야합니다.

브라우저 창에서 음영 처리 된 상자가 창의 왼쪽으로 확장됩니다.

출처

2015-01-08 00:33:43 Misunderstood

고마워요! 나는 그 문제가 나의 마진이라는 것을 이해하지 못했다. 당신의 설명은 완벽합니다. 감사. – Joe

당신은 플로트를 사용하지 않는 이유는 확실하지. IE8과 같은 모든 브라우저에서 인라인 블록이 작동하지 않습니다. 각 열의 내용이 동적 인 경우

.col{margin:0 0 .3em .3em ;-webkit-column-count: 3;-moz-column-count: 3;-ms-column-count: 3;-o-column-count: 3;column-count: 3;}

당신은 같은 것을 사용할 수 있습니다. 자바 스크립트를 사용하여 onload 이벤트 후 각 열의 길이를 균등하게 지정할 수 있습니다.

var max = 0; 
var len = document.getElementById('col1').offsetHeight; 
if (len > max)(max = len;} 
len = document.getElementById('col2').offsetHeight; 
if (len > max)(max = len;} 
len = document.getElementById('col3').offsetHeight; 
if (len > max)(max = len;} 
document.getElementById('col1').style.height= (max+ 'px'); 
document.getElementById('col2').style.height= (max+ 'px'); 
document.getElementById('col3').style.height= (max+ 'px');

출처

2015-01-07 22:53:24 Misunderstood

플로트를 사용하고 싶지 않은 주된 이유는 학문적 인 이유입니다. 이 상황에서 인라인 블록이 작동하지 않는 이유를 이해하려고합니다. 66 %를 제거하고 너비를 변경하라는 귀하의 제안을 시도했습니다. 이것은 작동하지 않았다. 66 %를 제거하면 중간 div가 사라지고 첫 번째와 마지막 값은 변경되지 않습니다. div의 너비를 변경해도 도움이되지 않습니다. – Joe

그것은 존경스럽고 존중합니다. BTW 디스플레이를 제거 할 수 있습니다 : 인라인 블록 및 렌더링이 변경되지 않습니다. – Misunderstood

대부분의 브라우저는 다음 번호를 무시하지만 width: 33.33%을 사용하는 것이 좋습니다. 또한 display: inline-block;은 요소 사이에 공백을 추가하는 것으로 알려져 있습니다. 이 문제를 해결하는 방법은 여러 가지가 있습니다. http://css-tricks.com/fighting-the-space-between-inline-block-elements/

출처

2015-01-07 22:58:47 TheFrozenOne

CSS 세로 정렬 및 인라인 블록 문제

답변

관련 문제