목록 (< ul>)이 특정 높이 또는 이와 비슷한 것을 제공 할 수 있습니까? 너무 많은 경우 항목 (< li>)을 새로운 열로 이동시키는 것입니까?목록에 특정 높이를 지정하면 옆에있는 새 열로 이동할 수 있습니까?
난 여기가 설명했습니다
http://oi47.tinypic.com/2dqj5gg.jpg
빨간색 상자는 특정 높이를 가지고있다. 사용할 수있는 공간보다 많은 항목이있는 경우 내 예제에서 "List7, List8, List9"와 마찬가지로 다음 행까지 간단하게 이동해야합니다.
CSS 열 수를 다음과 같이 사용하십시오.
ul {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
보편적으로 지원되는 것은 아니지만 문제가있는 브라우저는 무시해도됩니다. 그들에게 당신은 수동으로 하나 이상의 UL로 분할하고 그들을 떠 다니는 것 또는 똑같이 끔찍한 것과 같은 비 의미 론적 인 것을해야만 할 것입니다.
빠른 방법은 다음과 같습니다 float로 li 태그, 다음과 같습니다
ul
{
height: 100px;
border: 1px solid #f00;
}
li
{
float: left;
border: 1px solid #0f0;
width: 50px;
}
그러나 이것은 당신에게 다음과 같은 구조를 제공합니다 :
List1 List2 List3
List4 List5
당신이 특별히 제공에서 구조가 필요한 경우 그런 다음 전체 브라우저 지원을 받으려면 jQuery로 동적 렌더링을 살펴야 할 수도 있습니다. column-count를 사용하는 예 당신이 할 수있는
즉, 더 많은 영업 이익 사진보다 수평으로 배열 된 바닥 글에 넣어 목록 사람들의 종류처럼 - 나는 그가 더 잡지 칼럼 후에 생각 보기. – moopet
@moopet 그래, 그게 내가 생각한거야.하지만 우리가 다른 대답에서 볼 수 있듯이, 이렇게하는 순수한 CSS 방법은 어렵고 호환되지 않을 수있다. 개인적으로 계수 계산을 사용하여 스크립트에서이 작업을 동적으로 수행하여 열로 정렬합니다. –
,이 비록
ul {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
height: 60px;
width: 300px;
}
모든 브라우저에서 지원되지 않습니다. 당신은 polyfill, 또는 그냥 점진적 향상을 사용하여 자바 스크립트 플러그인을 사용할 수 있습니다 (결국 목록입니다).
http://www.alistapart.com/articles/multicolumnlists/는 – kapa