필자의 블로그에서 http://beerwhich.com/blogFun/index.html을 설정하고 있는데, column-width 속성을 사용하여 가로 읽기 환경을 만듭니다.-moz/webkit 열 너비 CSS를 사용할 때 여러 게시물을 서로 나란히 놓을 수없는 이유는 무엇입니까?
문제 : 두 게시물을 떠 다니지 만 여러 게시물을 가로로 나란히 표시 할 수 없습니다.
어떤 조언이나 지식이라도 대단히 감사하겠습니다!
@Sean;
.container {
height: 100%;
overflow: hidden;
padding: 20px 0 0 100px;
width: 4270px;
}
편집 : child div의
공간을 column-width 속성 문제 당신의 .container div (부모 DIV)에 폭을 줄이없는 당신이 말했듯이
는 그 귀하의 div의 너비를 지정하고 싶지 않아요. 그래서, 당신이
CSS를 할 수있을 수 있습니다 :
.container {
white-space: nowrap;
}
.post {
display: inline-block;
padding: 110px 0 0;
white-space: normal;
}
.post .text {
-moz-column-count: 3;
-moz-column-gap: 20px;
-moz-column-width: 320px;
height: 500px;
}
.column {
display: inline-block;
}
검사는 텍스트에 따라 column-count: 속성을주고 예를 http://jsbin.com/oruyir/18이다.
수평 레이아웃 작업을 수행하는 방법에 대한 자습서는 http://css-tricks.com/166-how-to-create-a-horizontally-scrolling-site/을 확인하십시오.
IE8에서 작동하지 않으려면 CSS3's Flexible Box module을 사용하고 게시 항목에는 부동 상자 대신 box-orient: horizontal을 설정하면됩니다.
column-count과 column-gap을 대신 사용할 수 있으며 더 좋은 결과를 얻으려면 box-flex으로 혼합하면이 디자인을 매우 훌륭하게 수행 할 수 있습니다.
은 여기 내가 신체의 폭을 만들면 것 같아 조금 신속하고 더러운 데모
입니다 : -moz-MAX-내용은 작동하지만 나는 이것이 가장 좋은 방법 인 경우 확실하지 않다? 각 게시물의 너비를 지정해야하거나 겹치는 것으로 나타났습니다. 이 열 너비를 사용하여 문제가 느낌이 있습니까? – Sean