javascript - 如何修复 CSS div 未正确对齐

Question

我有 3 个显示不同信息集的 div 卡片。我尝试将它们设置为显示:网格，同时设置分数相等，但由于某种原因，div 堆叠起来很笨拙？

JS fiddle demo

     <!--Main Background-->
    <div class="background">
      <!--Main working panel-->
      <div class="workspace">
        <!--Memberships Card-->
<div class="card text-center profile-card box box-primary">
    <div class="card-body" >
      <h5 class="card-title" style="color:white;"><i class="far fa-credit-card"></i>  Memberships</h5>
      <p class="card-text" style="color:rgba(255, 255, 255, 0.295);">Set or adjust your membership status</p>
    </div>
    <div class="card-footer"style=" padding-left: 0px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;" >
        <ul class="list-group list-group-unbordered">
            <li class="list-group-item" style="border-bottom: 0.15em solid white !important;">
              <div >
              <b style="color:#FEBD69; float:left;"><i class="fas fa-book-reader"></i> text</b> <b style="color:rgb(255, 255, 255); float:right;">I want to spend £ " " per " day "</b>
            </div>
            </li>
            <li class="list-group-item" style="border-bottom: 0.15em solid white !important;">
                <div >
                <b style="color:#FEBD69; float:left;"><i class="fas fa-book-reader"></i> text</b> <b style="color:rgb(255, 255, 255); float:right;">I want to spend £ " " per " day "</b>
              </div>
              </li>
              <li class="list-group-item" >
                  <div >
                  <b style="color:#FEBD69; float:left;"><i class="fas fa-book-reader"></i> text</b> <b style="color:rgb(255, 255, 255); float:right;">I want to spend £ " " per " day "</b>
                </div>
                </li>
          </ul>
    </div>
</div>
        <!--Profile card-->
        <div class="card text-center profile-card  box box-primary">
            <div class="card-body" >
                <img src="img/pickles.png"  class="mr-3 profile-icons " alt="...">
                <br>


                      </li>
                  </ul>
            </div>
        </div>
        <br>
<div>
        <!--Target Card-->
        <div class="card text-center profile-card  box box-primary">
            <div class="card-body" >

                    </div>
                    </li>
                    <li class="list-group-item" style="border-bottom: 0.15em solid white !important;">
                        <div >
                        <b style="color:#FEBD69; float:left;"><i class="fas fa-book-reader"></i> text</b> <b style="color:rgb(255, 255, 255);float:right; ">I want to spend £ " " per " day "</b>
                      </div>
                      </li>
                      <li class="list-group-item" >
                          <div >
                          <b style="color:#FEBD69; float:left;"><i class="fas fa-book-reader"></i> text</b> <b style="color:rgb(255, 255, 255);float:right; ">I want to spend £ " " per " day "</b>
                        </div>
                        </li>
                  </ul>
            </div>
        </div>
      </div>
        <br>

        <!--Target Jumbotron-->
        <div class="card profile-jumbotron" >
            <div class="container">
              <h1 class="display-4">Charts</h1>
              <p class="lead">
                  <canvas id="myChart" width="400" height="100"></canvas>
                  <input type="button" value="Add Data" onclick="adddata()">                <div class="progress">

                <div class="progress">
                  <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</p>
            </div>
          </div>

      </div>

    </div>

有人能看出为什么它没有正确对齐吗？相反，它会弹出屏幕底部？甚至还有一个被注释掉的超大屏幕，我试着与他们对齐，但那根本不起作用。

Answer 1

JSFiddle Demo

1. You had a extra div wrapper for your last div section

2. Remove unnecessary br tag

<div class="card text-center profile-card  box box-primary">
       <div class="card-body" >
              <h5 class="card-title" style="color:white;"><i class="fas fa-bullseye"></i>  Targets</h5>
              <p class="card-text" style="color:rgba(255, 255, 255, 0.295);">Set or adjust your performance targets</p>
       </div>
       <div class="card-footer"style=" padding-left: 0px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;" >
               <ul class="list-group list-group-unbordered">
                    <li class="list-group-item" style="border-bottom: 0.15em solid white !important;">
                      <div >
                      <b style="color:#FEBD69; float:left;"><i class="fas fa-book-reader"></i> text</b> <b style="color:rgb(255, 255, 255);float:right; ">I want to spend £ " " per " day "</b>
                    </div>
                    </li>
                    <li class="list-group-item" style="border-bottom: 0.15em solid white !important;">
                        <div >
                        <b style="color:#FEBD69; float:left;"><i class="fas fa-book-reader"></i> text</b> <b style="color:rgb(255, 255, 255);float:right; ">I want to spend £ " " per " day "</b>
                      </div>
                      </li>
                      <li class="list-group-item" >
                          <div >
                          <b style="color:#FEBD69; float:left;"><i class="fas fa-book-reader"></i> text</b> <b style="color:rgb(255, 255, 255);float:right; ">I want to spend £ " " per " day "</b>
                        </div>
                   </li>
              </ul>
       </div>
 </div>