将 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>我的输出如图所示，无论 level2 有多少子级，我都不希望 level1 和 level3 之间有空间，如果 level1 有 n 个子级，则 level2 和 level 4 反之亦然

Answer 1

我认为您正在寻找 CSS 砌体，它可以根据您的需要根据列或行进行调整。

还提供了一些 js fiddle 的链接供您参考

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>

希望它对你有用！