时间戳

首页 > 解决方案 > 列未正确拆分

html - 列未正确拆分

问题描述

测试需要底部图片低于另一张相同的图片列未正确拆分。我需要底部图片在上面的同一张图片下。

更改颜色和图像大小

   <div class=" container mx-auto mt-5 p-0">
        <div class="row m-0 ">
            <div class="col-4 p-0"><a href="ourstory.html"><img src="Mainimages/Ourhistory.jpg" style="width:100%"
                        alt="Our History"></a>
            </div>
            <div class="col-8 p-0">
                <a href="promotions.html"><img src="Mainimages/Promotions.jpg" style="width:100%" alt="Promotions"></a>
            </div>
            <div class="w-100"></div>
            <div class="col-8 p-0">
                <a href="promotions.html"><img src="Mainimages/Promotions.jpg" style="width:100%" alt="Promotions"></a>
            </div>
        </div>
    </div>

标签： htmlbootstrap-4

解决方案

在 bootstrapcol-6中是 50% 的同义词，col-12是 100%

因此，从技术上讲，为了实现您的目标，您可以：

|-------------------- div:col-12 ------------------------ ------|

|----- div:col-6 ---------| |--------- div:col-6 -------------|

|---------------------------| |--------- div:row --------------|

|---------图像-------------| |- div:col-12 -|-|- div:col-12 -|

|---------------------------| |----- img ----|-|---- img --------|

试试下面的片段：

.s50{
height:50%;
} 
.s50 img {
width:100%; 
height:100%
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mx-auto mt-5 p-0">
        <div class="row m-0 ">
            <div class="col-6 p-0">
<a href="ourstory.html"><img src="https://pinimg.icu/wall/0x0/los-mejores-fondos-de-pantalla-para-hombres-tumblr-wallpaper-E7f21aa5c622192c35a8e92d039623fcc.jpg?t=5cf09dc88fee5" style="width:100%"
                        alt="Our History"></a>
            </div>
            <div class="col-6 p-0">
            <div class="col-12 s50 p-0">
                <a href="promotions.html"><img src="https://hackernoon.com/hn-images/1*lduEjOI-EQltoRbmKSICeA.jpeg" alt="Promotions"></a>
            </div> 
            <div class="col-12 s50 p-0">
                <a href="promotions.html"><img src="https://d3n8a8pro7vhmx.cloudfront.net/3dna/pages/46410/meta_images/original/00-featured-bs4-bootstrap.jpg?1561992643" style="" alt="Promotions"></a>
            </div>
          </div>
      </div>
</div>

推荐阅读