时间戳

首页 > 解决方案 > Bootstrap 垂直对齐图像

html - Bootstrap 垂直对齐图像

问题描述

<div class="container-fluid padding" style="margin-top: 150px; margin-bottom: 75px;">

          <div class="row padding images"><!--Image 1-->
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-8">
              <img src="https://i.stack.imgur.com/YO4AV.jpg" alt="">
            </div>
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 vcenter"><!--Image 2-->
              <img src="https://i.stack.imgur.com/YO4AV.jpg" alt="">
            </div>
            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 vcenter"><!--Image 3-->
              <img src="https://i.stack.imgur.com/YO4AV.jpg" alt="">
            </div>
            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4"><!--Image 4-->
              <img src="https://i.stack.imgur.com/YO4AV.jpg" alt="">
            </div>
            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4"><!--Image 5-->
             <img src="https://i.stack.imgur.com/YO4AV.jpg" alt="">
            </div>
            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4"><!--Image 6-->
             <img src="https://i.stack.imgur.com/YO4AV.jpg" alt="">
            </div>
</div>

所以图像 1 占用 8/12 列，我希望图像 2 和 3 沿图像 1 的右侧垂直对齐，但发生的情况是图像 2 在右侧，但图像 3 在新行下方结束图像 4-6 将图像 6 向下推。那么我应该怎么做才能使图像 3 在图像 2 下沿 / 进行垂直对齐或沿着图像 1 的右侧出现类似的东西？

images{
        width: 80%;
        margin: 0 auto;
      }
      .images img{
        background-color: red;
        float: left;
        margin: 15px 0px;
        width: 100%;
        height: auto;
        border: 1px solid gray;
      }

标签： htmlcssimagebootstrap-4

解决方案

CSS

 img{
 width: 100%;
 height: 100%;
 }

 .paddimages{
  padding: 0;
 }

HTML

 <div class="container-fluid padding" style="margin-top: 150px; margin-bottom: 75px;">

    <div class="row">

        <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8 paddimages"><!--Image 1-->
            <img src="https://i.stack.imgur.com/YO4AV.jpg" alt="">
        </div>

        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 paddimages"><!--Image 2 and Image 3-->

            <div class="row">
                <img src="https://i.stack.imgur.com/YO4AV.jpg" alt="">
            </div>

            <div class="row">
                <img src="https://i.stack.imgur.com/YO4AV.jpg" alt="">
            </div>

        </div>

    </div>  

    <div class="row">   

        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 paddimages"><!--Image 4-->
            <img src="https://i.stack.imgur.com/YO4AV.jpg" alt="">
        </div>

        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 paddimages"><!--Image 5-->
            <img src="https://i.stack.imgur.com/YO4AV.jpg" alt="">
        </div>

        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 paddimages"><!--Image 6-->
            <img src="https://i.stack.imgur.com/YO4AV.jpg" alt="">
        </div>

    </div>

 </div>

推荐阅读