2016-09-28 6 views
-1

크기와 너비가 다른 div가 많습니다.서로 다른 크기의 요소 배치 (다른 크기)

rectangles next to each other

사람은 내가 어떤 CSS 속성을 사용합니다 알고 : 나는 자동으로 다른 사업부 내부에 그들을 배치하고 원하는 위치 하시겠습니까? 내가 플로팅 + 디스플레이 (여러 조합)와 함께 노력하고 아무것도 올바르게 작동하지 - 한 줄에 divs했다 -> 많은 공간 (하나의 큰 요소) -> 다음 줄 -> 등등 ... 등등 ...

+2

masonary 사용 js – Dhaarani

+0

힘든 작업입니다. 나는 CSS로 할 수 있다고 확신하지 못한다. JS를 사용하여 위치 지정을 조작 할 수는 있지만이 스레드의 범위를 벗어납니다. (요소들 사이의 최소 간격/기타 제한/의존성 등) – Narxx

+0

예. 나는 Masonry js가 제공하는 것과 같은 것을 달성하고 싶다. CSS를 통해이를 달성 할 수있는 방법은 없습니다. 크기 (높이/너비)에 대한 요소 정보를 제공해야합니까? 내 요소는 자동으로 생성되며 크기를 결정할 수 없습니다. –

답변

2

Flexbox을 사용하지 않으면이 레이아웃을 이해하기 어렵습니다.

Flexbox layout example

당신은 같은 레이아웃을 acheive 수있게된다 Masonry으로 JS 플러그인을 사용할 수 있습니다.

0

정확하게 이해했다면 원하는 크기로 된 컨테이너에 배치 한 다음 (예 : 내용에 따라 높이를 확장 한 다음) 사용자가 표시하는 방식대로 정렬하십시오. 내가 생각할 수있는 가장 쉬운 방법은 Twitter Bootstrap입니다. 그것은 container 클래스를 가지고 있으며 div 내에서 요소를 정렬 할 수 있으며 자동으로 반응 형이됩니다.

팁 : position: absoluteheight:은 사이트 흐름에 지장을 줄 수 있으므로 사용하지 마십시오.

부동 요소를 지우는 것을 잊지 마세요.

관련 문제