Question

<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最终在图像1的下方图像4-6的新行将图像6下推。那么我应该怎么做才能使图像3沿着/做垂直对齐或沿着图像1的右侧类似地最终位于图像2之下？

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

Answer 1

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>

Bootstrap垂直对齐图像

1 个答案: