CSS3 열 배경 컷오프

Question

CSS3 열을 사용하여 일부 div를 위에서 아래로 정렬 한 다음 왼쪽에서 오른쪽으로 정렬하려고합니다. 그것은 꽤 잘 작동하는 것 같지만 아래 이미지와 같이이 문제가 하나 있습니다. div의 각각에 배경을주고, 원하는대로 전체 배경을 한 블록으로 이동하는 대신 창 높이를 조정할 때 점진적으로 추가하여 두 열 사이의 배경을 분리합니다. 이것은 정말로 나빠 보인다. 내 div의 배경을 보존 할 수있는 방법이 있는지 궁금해서 창 크기가 너무 작아서 한 픽셀 높이의 div도 수용 할 수 없게되면 전체 div가 다음 열로 이동합니다.

둘째, 창 크기와 관련하여 페이지의 열을 가운데 맞춤하고 싶습니다. http://jsfiddle.net/eE3z6/

#mainContent /* The containing div */ 
{ 
    position: absolute; 
    top: 50px; 
    bottom: 50px; 
    margin: 10px; 
    column-width: 400px; 
    -webkit-column-width: 400px; 
    -moz-column-width: 400px; 
} 

.blockData /* The divs inside are all of this class */ 
{ 
    position: relative; 
    width: 380px; 
    height: 30px; 
    padding: 4px; 
    margin: 0px 0px 10px 0; 
    border: 4px outset grey; 
    background: lightgrey; 
} 

Answer 1

단지에서 .blockData

데모에 대한 -webkit-column-break-inside : avoid; 및 display : inline-block을 추가 http://jsfiddle.net/eE3z6/4/

Answer 2

는 내가 대답 생각 : 나는 10

현재 바이올린 수있는이 크롬 (최근 버전), 파이어 폭스 (최근 버전)에서 일하고 싶어하고, IE 이 어제. float : .blackData 및 .listData 스타일을 사용하지 말고 padding-bottom을 .listData 스타일에 추가해야합니다. 20px가 작동하는 것 같습니다. 열은 다음 열로 보낼 내용을 결정할 때 내용 (배경이 아님)을 확인하고 .listData의 아래쪽에 패딩을 추가하여 내용을 배경과 동일한 크기로 만듭니다.

또한 jsfiddle에서 .blockData 스타일을 두 번 사용하므로 두 가지 중 하나를 사용해야합니다.

컬럼이 주 컨텐츠 div의 중심에 오도록하려면, #mainContent의 절대 스타일과 .block 데이터 마진을 5px 0px에서 5px auto로 변경해야합니다. 여백에 자동을 추가하면 자동으로 콘텐츠의 가운데에 배치됩니다. .blockData 상단에서 여백을 가져와 맨 아래에 놓는 것이 좋습니다. 그러면 모든 열이 맨 위에 정렬됩니다.

이제 #mainContent에서 절대 위치 지정을 제거하면 블록을 가운데 정렬 할 수 있지만 다시 조정하지 않고 한 블록을 다음 열로 보내지 만 각 열의 블록 수를 균일하게합니다 (예를 들어 첫 번째에 7을 가지지 않고 두 번째에 1을 갖는 대신 첫 번째에는 4, 두 번째에는 4를 가질 것입니다). 그것은 당신이 그것이 어떻게 표시되기를 바라는가에 달려 있습니다.

또한 jsfiddle을 수정했습니다. 그냥 회전 위치 : #mainContent에 대해 절대 해제하고 켜면 내가 말하는 내용을 볼 수 있습니다.

편집 :

대신 각 당신이 디스플레이를 사용하여 배경 차단을 막기 위해 바닥 패딩 사용 :이 - 내부 열 휴식과 유사하다 .blockData에 인라인 블록을 (:에서 피 이 경우지만 모든 브라우저에서 작동).