벽돌 형 레이아웃 CSS 만있는 경우

이미지에서 볼 수있는 것처럼 모든 상자마다 높이가 다르며 두 배의 너비가있는 상자가 있습니다.벽돌 형 레이아웃 CSS 만있는 경우

Layout

그것은 벽돌 스타일의 레이아웃에만 CSS로를 만들 수 있습니까?

2012-08-24 Bernat

안녕하세요 저는이 사이트를 기억합니다. 확인하고 싶은지 모르겠지만 js 또는 순수 CSS로 작동하는지는 기억하지 못합니다. 물론 벽돌을 사용하고 있지는 않습니다. http : //www.leica- oskar-barnack-award.com/ 도움이 되길 바랍니다 – Paradise

시도한 코드는 어디에 있습니까? 온라인 샌드 박스 또는 jsfiddle은 어디에 있습니까? 그래서 당신이 검색했다면, 당신은 CSS로 벽돌을 복제 할 수 없다는 것을 알았을 것이고, 크로스 브라우저와 크로스 디바이스에서 작동 할 수 있다는 것을 알았을 것입니다. – Systembolaget

천천히 숨을 쉬어 ...) – Bernat

CSS3 지원으로이 작업을 수행 할 수 있습니다 :

http://jsfiddle.net/huAxS/2/

.container { 
    -moz-column-count: 2; 
    -moz-column-gap: 10px; 
    -webkit-column-count: 2; 
    -webkit-column-gap: 10px; 
    column-count: 2; 
    column-gap: 10px; 
    width: 360px; 
} 

.container div { 
    display: inline-block; 
    width: 100%; 
    background-color: red; 
}

을 더 CSS3의 지원과 함께, 당신은 불행하게도 JS에 의존해야합니다.

출처

2012-08-24 22:09:57 Esailija

내가 말했듯이, 두 배의 너비가있는 상자가 있습니다! (이 경우 2 열). 그리고 네, 저는 CSS3를 사용할 수 있습니다! – Bernat

오랜 시간 동안 살펴 보았습니다. CSS만으로는 불가능했습니다. – alt

+22

이 솔루션의 문제점은 항목이 위에서 아래로, 왼쪽에서 오른쪽으로 배치된다는 것입니다. 일반적으로 예상되는 것 (문화적 가정은 예외)은 왼쪽에서 오른쪽, 위에서 아래로의 레이아웃입니다. 이것은 일반적인 CSS3-columns 기반 권장 사항을 보여줍니다. –

저는 지금 같은 종류의 레이아웃으로, 두 개의 와이드 박스가있는 두 개의 열로 사이트에서 작업하고 있습니다. 내가하는 일은 콘텐츠의 나머지 부분에서 더블 와이드를 분리하는 것입니다. 예 :

그런 다음 CSS3 열 솔루션을 two-columns 클래스에만 적용 할 수 있습니다. IE9를 지원해야하는 경우 슬프게도 JavaScript fallback을 추가해야합니다.

출처

2012-10-24 17:24:52 DavGarcia

벽돌 형 레이아웃 CSS 만있는 경우

답변

관련 문제