다른 크기의 div 블록을 배열하십시오.

"일반 크기"와 "2x2 일반 크기"블록이있는 웹 사이트 레이아웃을 만들어야하며 더 큰 블록을 배치하고 더 작은 블록을 배치 할 필요가 없습니다. 예를 들어 아래 사진에서 이와 같은 상황이 발생하면 블록 8이 5 이하이어야하고 블록 9는 블록 8 아래에 위치해야합니다 (블록 6 이하).다른 크기의 div 블록을 배열하십시오.

사진 : http://i.stack.imgur.com/epWJo.png 다음

내 CSS 지금까지입니다 :

.block 
{ 
    float: left; 
    display: inline-block; 
    margin: 3px; 
    width: 141px; 
    height: 150px; 
    border-style: solid; 
    background: lightgray; 
    border-width: 1px; 
} 

.block4 
{ 
    float: left; 
    display: inline-block; 
    margin: 3px; 
    width: 294px; 
    height: 308px; 
    border-style: solid; 
    background: lightgray; 
    border-width: 1px; 
}

당신은 어떻게 만드는 저를 도와 주실 수 있습니까?

당신에게

출처

2013-07-31 grabber

HTML을 게시하고 [jsfiddle] (http://jsfiddle.net/) – feitla

에 문제를 재현하십시오. http://jsfiddle.net/arDkp/ – grabber

동위 원소 감사 또는 jQuery를 Masonary 당신이 컨테이너에 1/4 크기의 블록을 넣어하지 않으려면

http://isotope.metafizzy.co/ 

http://masonry.desandro.com/

출처

2013-07-31 17:48:53

가능합니다. CSS로? 나는 css가 지저분하다는 것을 알고있다. 그러나 ... 그것은 나의 프로젝트가 단지 css와 html로 그것을하는 것이 더 좋을 것이다. – grabber

수행 할 수 없습니다 원하는 것을 잘 작동합니다. 컨테이너가 왼쪽으로 떠있는 경우 작은 블록 중 4 개가 들어 있습니다. 다른 사람들처럼 jQuery Masonry를 사용할 수도 있습니다.

출처

2013-07-31 17:58:59 Don

다른 크기의 div 블록을 배열하십시오.

답변

관련 문제