Избегайте перекоса столбцов css3 после того, как они были нарисованы

Question

Я использую столбцы css3 для отображения неупорядоченного списка в 3 столбцах. Элементы списка содержат также списки, которые могут быть показаны или скрыты, нажав на заголовок, используя jQuery.

HTML, выглядит как (с именами классов для описания расположения и взаимодействия):

<ul class="i-display-in-3-columns"> 
    <li> 
    <h3 class="slide-toggle-sibling-list-on-click">column title 1</h3> 
    <ul class="i-am-initially-hidden"> 
     <li>item 1</li> 
     <li>item 2</li> 
     <li>item 3</li> 
     <li>item 4</li> 
    </ul> 
    </li> 
    <li> 
    <h3 class="slide-toggle-sibling-list-on-click">column title 2.</h3> 
    <p>This can be very long with perhaps an additional paragraph as well.</p> 
    <ul class="i-am-initially-hidden"> 
     <li>item 1</li> 
     <li>item 2</li> 
     <li>item 3</li> 
     <li>item 4</li> 
    </ul> 
    </li> 
    /* some more items */ 
</ul> 

Это работает, но каждый раз, когда вложенный список открыт или закрыт, столбцы получить перерисовываются.

Я хотел бы, чтобы заморозить колонны после того, как они первоначально были разработаны, чтобы избежать этого переформатирования, так что каждый элемент остается в колонке он сначала обращается в.

Я могу конечно написать кладку, как решение в javascript для преобразования моего списка в 3 списка, которые отображаются рядом друг с другом, но я надеялся, что существует более простое решение, желательно только в CSS или в javascript, который сохраняет список как список.

Возможно ли это, или мне просто нужно переписать DOM?

Answer 1

Я не думаю, что вы можете достичь этого с помощью столбцов CSS. Существует опция для переключения visibility вместо display дочерних списков, но я предполагаю, что вы этого не хотите.

Еще одно возможное решение для CSS - это использование модуля flexbox (и решения проблем с поддержкой браузера). Например, я считаю, что это может быть то, что вы хотите (работает на Chrome 29):

.i-display-in-3-columns { 
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
} 

.i-display-in-3-columns>li { 
    flex: 1 1 200px; /* 200px is the column width */ 
} 

Demo