我一直在尝试在行和列中设置8 div堆栈的样式,但是不能。我想在这些div中放置图标。尽管我认为拥有一张我想要的图片会更好,所以我附上了一个屏幕截图。善良的心,请帮忙。

这是代码:

<template name="User">
    <div class="col-md-12">

        <li class="user black {{selected}} results" id="user-link" style="font-family: 'candara'">
            <span class="name" style="color: black; font-family: 'candara'"><i class="fa fa-warning" style="color: red;"></i> {{newschoolnamevar}}</span>
            {{#if selected}}
                <hr>
                <div class="jokeInfo">
                    <div>
                        <span class="possy blue" style="color: black;">Motto: {{newschoolmottovar}}</span>
                    </div>
                    <br>
                    <div>
                        <span class="author" style="color: black;"> Author: {{author}}</span>
                    </div>
                    <br>
                    <div>
                        <span class="author" style="color: black;">Vision: {{newschholvisionvar}}</span>
                    </div>
                    <br>
                    <div>
                        <span class="author" style="color: black;">Mobile: {{mobile}}</span>
                    </div>
                    <br>
                    <div>
                        <span class="author" style="color: black;">Sell School: {{sellschoolvar}}</span>
                    </div>
                    <br>
                </div>
            {{/if}}
        </li>
    </div>
</template>

最佳答案

确定容器的LI,并给出以下信息:

 ul {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
 }


和LI:

li {
 width: 25%;
}

10-05 20:39
查看更多