다음 열로 나누기

column-count을 사용하여 이미지 격자를 만듭니다. 열 사용 문제는 텍스트와 마찬가지로 이미지가 손상 될 수도 있습니다. 따라서 이미지의 상단 절반은 한 열에 있고 하단 절반은 두 번째 열에있을 수 있습니다. 열의 항목에 display: inline-block을 추가하여이 문제를 해결했습니다. 그게 내 현재 문제가있어 :
column-count이 3이고 항목이 7 인 항목은 [3] [3] [1]과 같이 표시됩니다.다음 열로 나누기

[item] [item] [item] 
[item] [item] 
[item] [item]

나는 항목을 [3] [2] [2]로 표시하고자합니다. 따라서 질문은 : div 중 하나를 다음 열로 옮길 수 있습니까?

HTML

<div id="container"> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
</div>

CSS

#container { 
    column-count: 3; 
    -moz-column-count: 3; 
    -webkit-column-count: 3; 
    width: 100%; 
} 
.item { 
    background: red; 
    /*-webkit-column-break-inside: avoid; 
    -moz-column-break-inside:avoid; 
    -moz-page-break-inside:avoid; 
    page-break-inside: avoid;*/ 
    display: inline-block; 
    height: 250px; 
    margin-bottom: 20px; 
    width: 100%; 
}

jsfiddle

휴식 이미지를 방지하기위한 두 번째 방법은 주석 부분 만 적은 간단한보다 지원하는 것 display:inline-block. 그것은 똑같은 일을합니다.

높이가 변하고 clear을 사용했습니다.

업데이트
요청마다 약간의 배경 정보/사용 사례.
이미지 그리드는 레스토랑의 간단한 웹 사이트에서 사용됩니다. 두 가지 기능이있는 여러 페이지에서 사용됩니다. 기능 1은 앞면에 있으며 세로 또는 가로 방향으로 8 개의 이미지가 서로 다른 페이지에 대한 링크로 작동합니다. (8 개의 이미지가 올바르게 나뉘어집니다. [3] [3] [2]) 이미지 격자의 두 번째 기능은 이미지 격자입니다. 예를 들어 레스토랑에는 풍부한 역사가 있으며 거의 100 년 전에 제작 된 이미지가 있습니다. 더 많은 이미지가 길을 따라 추가 될 수 있습니다. 세 개의 div 대신에 열 수를 사용하면 이미지를 더 쉽게 추가 할 수 있으며 응답하기가 쉽습니다. 문제는 7과 같은 특정 양의 이미지에서 이미지가 열을 통해 올바르게 분할되지 않는다는 것입니다.

업데이트 2
나는 벽돌 프레임 워크를 사용했지만, 그 부진했다.

출처

2014-05-22 Paul van den Dool

사용 : display:inline-block 대안을

, 여기에 바이올린입니까? 어쩌면'column' 레이아웃을 시뮬레이트하는 또 다른 방법이 있을까요? – Andrei

다른 모든 것이 실패하면, 더미 div를 삽입 할 수 있습니다.하지만 더러워진 느낌이 들겠습니다. (그리고 내가 당신의 설정에 대해 실행 가능한지 확실하지 않다).

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<style> 

#container { 
    column-count: 3; 
    -moz-column-count: 3; 
    -webkit-column-count: 3; 
    width: 100%; 
} 
.item { 
    background: red; 
} 

.item, .dummy { 
    display: inline-block; 
    height: 250px; 
    margin-bottom: 20px; 
    width: 100%; 
} 

</style> 
</head> 
<body> 

<div id="container"> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="dummy"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
</div> 

</body> 
</html>

출처

2014-05-22 07:43:25

나는 이것을 사용할 수있다. 감사. 다른 (더 나은) 답이 나오지 않으면이 것을 받아 들일 것입니다. –

귀하의 사용 사례에 따라 columns 레이아웃을 사용하는 것이 필요하지 않은 경우, 당신은 일반 display:inline-block; 아니면 display:table으로 시뮬레이션 할 수 있습니다.

http://jsfiddle.net/A4ZLc/1/

#container { 
// column-count: 3; 
// -moz-column-count: 3; 
// -webkit-column-count: 3; 
    width: 100%; 
    font-size:0px; 
} 
.item { 
    background: red; 
    display: inline-block; 
    height: 100px; 
    margin-bottom: 20px; 
    box-sizing: border-box; 
    width: 33%; 
    padding-right: 10px; 
    background-clip: content-box; 
    font-size: 12px; 
}

당신이 사용 사례를 조금 설명 할 수있는 display:inline-table

http://jsfiddle.net/A4ZLc/2/

#container { 
// column-count: 3; 
// -moz-column-count: 3; 
// -webkit-column-count: 3; 
    width: 100%; 
    display:inline-table; 
} 
.item { 
    background: red; 
    height: 100px; 
    box-sizing: border-box; 
    width: 33%; 
    padding-right: 10px; 
    background-clip: content-box; 
    float:left; 
    margin-bottom: 20px; 
}

출처

2014-05-22 08:00:01 Andrei

문제는 항목의 높이가 가변적이라는 것입니다. 귀하의 방법은 위대한 보이지 않을 항목 사이에 gabs가 발생합니다. –

아하, 이해할 수있는 또 다른 아이디어가 있는데, 작동하면 몇 분 후에 댓글을 달아 올 것입니다. – Andrei

3 열에 대해서는 작동하지 않습니다. (http://jsfiddle.net/A4ZLc/3/ 이것은 내가 할 수있는 한도입니다.) – Andrei

답변

관련 문제