플로팅 : 왼쪽 및 다음 줄로 지우기

나는 가변 길이의 목록이있는 일련의 상자를 모으고 있습니다. 상자는 모두 너비가 같지만 높이가 다릅니다. 화면의 상단에 왼쪽에서 오른쪽으로 채워진 상자를 화면 전체에 걸쳐서 열을 만들고, 화면의 너비에 따라 열 수를 지정하고 싶습니다. 내가 가지고있는 문제는 상자가 줄을 감쌀 때 기둥의 수직 간격입니다. 브라우저에서 다음 페이지를 850-1150 픽셀 너비로보고 콘텐츠가 2 열로 표시되도록하십시오. 플로트를 사용플로팅 : 왼쪽 및 다음 줄로 지우기

: 나는 내가 그것을 더 잘 보이는 display:inline-block; vertical-align:top;을 사용하여이 작업을 수행하기 위해 example of another way을 발견

this result을 가지고 떠났지만 여전히 수직 간격이있다. <div>CONTENT HERE</div> 상자의 무리 인 내용에

div { 
    display:inline-block; 
    vertical-align:top; 
    padding:15px; 
    border:2px; 
    border-color:#000; 
    border-style:solid; 
    width:400px; 
}

다음과 같이 나는 현재 페이지에서 사용하고

전체 CSS 코드입니다.

도움을 주셔서 감사합니다. 매우 감사드립니다.

출처

2013-07-04 Adarajin

잘 이해한다면 아마도 도움이 될까요? http://masonry.desandro.com/ http://tympanus.net/Development/GridLoadingEffects/index2.html – sinisake

또는 CSS 열, 표시 유지 : 이전 IE의 폴백으로 인라인 블록 :) –

확인 벽돌을 사용해서 작동 시켰습니다. 내 솔루션에 관심이있는 사람들을 위해, 내가 원하는 컨텐트 주위에 박스를 유지하기 위해, 나는 divs의 3 개의 레이어를해야했다. - 모든 것을 포함하는 외부 레이어, 그리고 떠 다니는 divs의 두 번째 레이어. 적용하고자하는 상자 서식을 가진 div의 3 번째 레이어. – Adarajin

석공 술을 사용하는 솔루션 : 석조 사이트 masonry.desandro.com (의견에 절대로 언급되지 않음)으로 이동하여 "masonry.pkgd.min.js"프로덕션 파일을 다운로드하십시오. 그리드를 작동시킬 페이지의 헤더에서 석조 파일을 참조하십시오. 페이지 본문에서 위의 사이트에서 "Initialize with HTML"코드 조각을 사용하여 외부 div 컨테이너를 만듭니다. 그 블록 안에는 "item"클래스의 div 컨테이너 (또는 itemSelector가 설정된 항목)가 있어야합니다. 형식화 할 수 없다는 점에 유의하십시오 (적어도 내가 말할 수있는 것은) div class = "item"입니다. 그래서 내가했던 것처럼 내용물 주위에 상자를 갖고 싶다면 부동 div 내에서 세 번째 div가 필요합니다. .

출처

2013-07-04 18:20:37 Adarajin

플로팅 : 왼쪽 및 다음 줄로 지우기

답변

관련 문제