выровняйте элементы li по горизонтали с двумя подчиненными, не оставляя дополнительного места

Question

Я работаю над проектом, где мой ul li должен отображаться горизонтально выровненным по ширине 50%, а под ним должен быть дочерний элемент li

Я знаю, что некоторые из них скажут попробовать CSS masonry но сработает ли это в IE, и я прошел так много уроков, но я до сих пор не понимаю, как реализовать этот подход здесь

Моя проблема начинается, когда у левой стороны есть дочерний элемент, а у правой стороны нет ' Тогда правая сторона li сохраняет пространство между двумя li. Также иногда порядок li не совпадает

ПРИМЕЧАНИЕ: мне также нужна поддержка IE 11 !! Вот мой HTML

<style>
        .level1 {
            float: left;
        }

        .level1>li {
            float: left;
            padding: 20px;
            width: 50%;
        }

        .level1>li>ul {
            padding-left: 20px
        }
    </style>



<ul class="level1">
        <li>Level</li>

        <li>Level2
            <ul class="level2">
                <li>Level1</li>
                <li>Level2</li>
            </ul>
        </li>

        <li>Level3</li>
        <li>Level4</li>
        <li>Level5</li>
        <li>Level6</li>
    </ul>

Мой вывод

Здесь, как показано на рисунке, я не хочу пробел между level1 и level3, независимо от того, сколько дочерних уровней level2 и наоборот для level2 и level 4, если level1 имеет n child

Answer 1

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

Также дается некоторая ссылка js скрипка для вашей справки

1. https://jsfiddle.net/denim2x/q5e20knd/339/

2. http://jsfiddle.net/Symphony/kd9m4qk6/

3. https://jsfiddle.net/tovic/nX9NT/

Вот измененное решение вашего кода:

<style>
        .level1 {
         position:relative;
         -moz-column-count: 2;
        -moz-column-gap: 3%;
        -moz-column-width: 50%;
        -webkit-column-count: 2;
        -webkit-column-gap: 3%;
        -webkit-column-width: 50%;
        column-count: 2;
        column-gap: 3%;
        column-width: 50%;

        }

        .level1>li {
            float: left;
            padding: 20px;
            width: 50%;
        }

        .level1>li>ul {
            padding-left: 20px
        }
    </style>



<ul class="level1">
        <li>Level</li>

        <li>Level2
            <ul class="level2">
                <li>Level1</li>
                <li>Level2</li>
            </ul>
        </li>

        <li>Level3</li>
        <li>Level4</li>
        <li>Level5</li>
        <li>Level6</li>
    </ul>

HOpe оно будет работа для вас!