Question

我如何对齐这些不同div的项目？

我试图将每列的标题与下面div的项目对齐，你能不能帮助我对齐这些？

带有row-header-course

的

course-name 带有row-header-progress

的

course-progress 带有row-header-remaining

的

course-remaining 带有row-header-timestamp

的

course-timestamp

所有左对齐。

这是我的代码：

<div class="row historico">

        <div class="row row-header col-md-12">
            <div class="row-header-course col-md-4">Curso</div>
            <div class="row-header-progress col-md-2">Progresso</div>
            <div class="row-header-remaining col-md-2">Faltam</div>
            <div class="row-header-timestamp col-md-2">Visto por último</div>
            <div class="row-header-remove col-md-2">Remover</div>
        </div>

            <div class="row-history col-md-12">
                <div class="course-row row">
                    <div class="course-name col-md-4">
                        <i class="fa fa-caret-right" aria-hidden="true"></i>
                        <a href="https://www.xxx.com.br/curso-teste-4">Curso Teste 4</a>
                    </div>
                    <div class="course-progress col-md-2">
                        <div class="course-progress-bar-wrapper col-md-8">
                            <div class="course-progress-bar" style="width: 100%;">&nbsp;</div>
                        </div>
                        <div class="course-progress-percent col-md-4">100%</div>
                    </div>
                    <div class="course-remaining col-md-2">Completo</div>
                    <div class="course-timestamp col-md-2">20 horas atrás</div>
                    <div class="course-remove col-md-2"><i class="fa fa-times" aria-hidden="true"></i></div>
                </div> <!--  .course-row -->
                <div class="unit-row">

                    <div class="row single-unit">
                        <div class="unit-name col-md-4">
                            <i class="fa fa-angle-double-right" aria-hidden="true"></i>
                            Curso Teste 4 - Unidade 2
                        </div>
                        <div class="unit-nbsp col-md-4">&nbsp;</div>
                        <div class="unit-timestamp col-md-2">20 horas atrás</div>
                    <div class="unit-remove col-md-2"><i class="fa fa-times" aria-hidden="true"></i></div>
                    </div>

                </div> <!--  .unit-row -->
            </div> <!--  .row-history -->

</div>

编辑：

现在的情况如下：

这就是我想要的样子：

Answer 1

以下是您需要休闲的代码结构。如果这对你没有帮助，请告诉我。我现在只做了2列

这里正在使用js fiddel链接：https://jsfiddle.net/tdxje0su/1/

                <div class="row row-header col-md-12">
                    <div class="row-header-course col-md-6">
                        <div class="col-md-12">
                            Curso
                        </div>
                        <div class="course-name col-md-12">
                            <i class="fa fa-caret-right" aria-hidden="true"></i>
                            <a href="https://www.xxx.com.br/curso-teste-4">Curso Teste 4</a>
                        </div>
                    </div>
                    <div class="row-header-progress col-md-2">
                        <div class="col-md-12">
                            Progresso
                        </div>
                        <div class="course-progress col-md-12">
                            <div class="row">
                                <div class="course-progress-percent col-md-12">100%</div>
                            </div>
                        </div>
                    </div>
                    <div class="row-header-remaining col-md-2">
                        <div class="col-md-12">
                            Faltam
                        </div>
                        <div class="course-remaining col-md-12">Completo</div>
                    </div>
                    <div class="row-header-timestamp col-md-2">
                        <div class="col-md-12">
                            Visto por último
                        </div>
                        <div class="course-timestamp col-md-12">19 horas atrás</div>
                    </div>
                </div>

            </div> <!-- .historico -->

Answer 2

得到它：

.course-progress, .course-remaining, .course-timestamp, .course-remove, .unit-nbsp, .unit-timestamp, .unit-remove {
    padding: 0 !important;
}

如何对齐不同div的这些列？

2 个答案: