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

Question

如何对齐这些不同 div 的元素？

我正在尝试将每列的标题与下面的 div 的元素对齐，你能帮我对齐吗？

row-header-course with 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 -->