将 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 的链接供您参考https://jsfiddle.net/denim2x/q5e20knd/339/http://jsfiddle.net/Symphony/kd9m4qk6/https://jsfiddle.net/tovic/nX9NT/这是您的代码的修改后的解决方案：<style>&nbsp; &nbsp; &nbsp; &nbsp; .level1 {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;position:relative;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;-moz-column-count: 2;&nbsp; &nbsp; &nbsp; &nbsp; -moz-column-gap: 3%;&nbsp; &nbsp; &nbsp; &nbsp; -moz-column-width: 50%;&nbsp; &nbsp; &nbsp; &nbsp; -webkit-column-count: 2;&nbsp; &nbsp; &nbsp; &nbsp; -webkit-column-gap: 3%;&nbsp; &nbsp; &nbsp; &nbsp; -webkit-column-width: 50%;&nbsp; &nbsp; &nbsp; &nbsp; column-count: 2;&nbsp; &nbsp; &nbsp; &nbsp; column-gap: 3%;&nbsp; &nbsp; &nbsp; &nbsp; column-width: 50%;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .level1>li {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; float: left;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 20px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 50%;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .level1>li>ul {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding-left: 20px&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </style><ul class="level1">&nbsp; &nbsp; &nbsp; &nbsp; <li>Level</li>&nbsp; &nbsp; &nbsp; &nbsp; <li>Level2&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul class="level2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Level1</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Level2</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; <li>Level3</li>&nbsp; &nbsp; &nbsp; &nbsp; <li>Level4</li>&nbsp; &nbsp; &nbsp; &nbsp; <li>Level5</li>&nbsp; &nbsp; &nbsp; &nbsp; <li>Level6</li>&nbsp; &nbsp; </ul>希望它对你有用！