인라인 블록 요소와 관련된 문제

원칙적으로 "메트로"디자인과 유사한 화면을 만들려고합니다.인라인 블록 요소와 관련된 문제

내가가는 길은 모든 요소가 동일한 너비이지만 동일한 높이가 아니라는 것입니다. 그들은 모두 위쪽으로 정렬하여 빈 공간이 무엇인지 알아 내야합니다. 위의 공간을 비우지 마십시오. enter image description here

내가 떠을 설정하면, 한쪽은 잘 보이지만, 다른 하나는하지 않습니다

오전 데 문제는 내가 설정 한 경우 요소들은 다음과 같이 렌더링 블록 인라인 것입니다. 여기서 두 플로트이다 좌측 및 플로트 : 오른쪽 : http://jsfiddle.net/paulocoelho/2qyrp/

쯔 코드 : 여기서 enter image description here

이 예에 바이올린 인

div{ 
    display:inline-block; 
    vertical-align:top; 
    margin:1px; 
    /*float:left;*/ 
} 

.smallBlock{ 
    height:50px; 
    width:50px; 
    background:blue; 
} 
.largeBlock{ 
    height:90px; 
    width:50px; 
    background:red; 
}

출처

2013-06-01 PCoelho

또한 비 JS 솔루션을 찾고 있습니다. – PCoelho

큰 타일을 세로로 길게 늘려야합니까? Windows 8 스타일은 수평 적입니다. – lurker

윈도우 8 블록은 두 가지 방법으로 늘릴 수 있다고 생각합니다 (vert와 horiz). 이 예에서는 높이가 가변적이지만 폭은 고정되어 있습니다. – PCoelho

동적 인 것으로 가정하면 여러 열을 사용하는 CSS3에서만 가능하며 응답 성이 필요하면 미디어 쿼리가 필요합니다.

나는 이것을 수행하는 방법을 보여주는 tutorial을 발견했으나 직접 테스트하지는 않았지만 제대로 작동하는 것으로 보입니다.

어쨌든 JS로이 작업을 수행하는 것이 좋습니다. 더 많은 기능을 제어 할 수 있으며 크로스 브라우저로 사용할 수 있습니다.

출처

2013-06-01 20:17:08 mfreitas

당신이 나에게 준 비 CSS 솔루션이 효과적입니다. 여기에 바이올린이 있습니다 : http://jsfiddle.net/paulocoelho/2qyrp/12/ 그리고 Funchal에서 온 것도 재미 있습니다. 하아! : P Obrigado :) – PCoelho

나는 너를 도울 수있어서 기뻐. 작은 세계입니다 :) – mfreitas

** 내 이전 의견에 대한 수정 **. 나는 CSS가 아닌 non-JS를 언급한다. – PCoelho

구조 열로 배치 그 수직으로 늘어나고 각 열을 가변 높이 요소로 차례로 채 웁니다.

출처

2013-06-01 20:16:33 psyclr

인라인 블록 요소와 관련된 문제

답변

관련 문제