如何使用div垂直对齐内容?

时间:2017-09-24 03:17:53

标签: php html html5

我在Yii2应用程序中遇到问题,当我上传多张图片时,它会变得完全不对齐。 This is how it is

我想在上传多张图片时一个接一个地垂直对齐内容。 This is how i want

这是我正在使用的代码

       <div class="people-nearby">
        <div class="nearby-user"> 
            <div class="row"> 
        <div class="col-md-2 col-sm-2">
             <?php
                          if (!empty($view)) {
                                   foreach ($view as $request) {
                       echo'
                    <div class="col-md-2 col-sm-2">
                     <img  src="'.$request['MediaPath'].'" alt="user" class="profile-photo-lg"/> 
                    </div>
                    <div class="col-md-7 col-sm-7">
                      <h5><a href="#" class="profile-link">'.$request['ContentName'].'</a></h5>

                        <p>File type</p>
                         <p class="text-muted">500m away</p> 
                    </div>
                   <div class="col-md-3 col-sm-3">
                       <button class="btn pull-right"><i class="ion-ios-trash"></i></button>
                  </div>

                            ';
                                  } }?>


</div>
  </div>
            </div>
      </div>
        </div>

1 个答案:

答案 0 :(得分:0)

由我自己排序。将代码更改为

<?php
                      if (!empty($view)) {
                               foreach ($view as $request) {
                   echo'



        <div class="row"> 


                <div class="col-md-2 col-sm-2">
                 <img  src="'.$request['MediaPath'].'" alt="user" class="profile-photo-lg"/> 
                </div>
                <div class="col-md-7 col-sm-7">
                  <h5><a href="#" class="profile-link">'.$request['ContentName'].'</a></h5>
                   <p>File type</p>
                     <p class="text-muted">500m away</p> 
                </div>
               <div class="col-md-3 col-sm-3">
                   <button class="btn pull-right"><i class="ion-ios-trash"></i></button>
              </div>




  </div>     ';
                              } }?>

现在工作正常。