html - 如何在 WordPress 中让这些行彼此相邻？

Question

我试图在 1 列中让两行彼此相邻。每次他们中的一个要站在另一个下面。这是链接：https ://preview.trixedesign.nl/ 这是关于这部分的：在此处输入图像描述

这是 HTML 和 CSS 代码：

运输

        <div class="div-holder small">
            <div class="foto">
                <a href="#">
                    <img class="grey-picture" src="https://preview.trixedesign.nl/wp-content/uploads/2020/07/missie-visie.jpg"  alt="Van Boxtel grond- en sloopwerk" title="Van Boxtel grond- en sloopwerk" />
                </a>
            </div>              
            <div class="text orange-arrow orange-back">
                <p>
                    <img src="https://preview.trixedesign.nl/wp-content/uploads/2020/07/grond-sloopwerk.svg"  alt="Van Boxtel grond- en sloopwerk" title="Van Boxtel grond- en sloopwerk" />
                    <br>
                    grond- en sloopwerk
                </p>
            </div>
        </div>

    flex-container {display: flex; flex-wrap: wrap; justify-content: center; position: relative; margin: 0 auto; }
.flex-container .div-holder { display: flex; height: 380px; width: 100%; position: relative; background-color: #F2F2F2;  margin:0px;  overflow:hidden; }

.flex-container .big { width: 100%;}
.flex-container .small { width: 140%; }

.flex-container .foto {width: 100%;  position: relative; background-color: #FC7C00; cursor:pointer; }
.flex-container .text { display: flex; justify-content: center;  align-items: center; text-align: center; font-size: 25px; padding: 35px;  min-width: 180px;  max-width: 180px; position: relative; background-color: #F2F2F2;}

.flex-container .text p { width: 100%;}

.flex-container .text img { width: 100%; max-width:60%; height: auto; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: 1s ease-in-out; transition: 1s ease-in-out; }

.flex-container .foto img { width: 100%;  height: 100%; object-fit: cover;  -webkit-transform: scale(1); transform: scale(1); -webkit-transition: 1s ease-in-out; transition: 1s ease-in-out; }
.flex-container .foto img:hover {  -webkit-transform: scale(1.1); transform: scale(1.1); filter: grayscale(0%); opacity: 1.0;  }
.flex-container .div-holder:hover > .text img {   -webkit-transform: scale(0.9); transform: scale(0.9);   }

img.grey-picture {filter: grayscale(100%);} 
img.transparant { opacity: 0.6;}

.flex-container .text:before {
    content: ' ';
    height: 0;
    position: absolute;
    width: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent; 
    border-right: 15px solid #F2F2F2; 
    top: 49%;
    left: -15px;
    z-index: 3;
}

.flex-container .orange-arrow:before {border-right: 15px solid #FC7C00;}
.flex-container .orange-back {background-color: #FC7C00; color: #ffffff;}

.flex-container .red-arrow:before {border-right: 15px solid #FF1D2F;}
.flex-container .red-back {background-color: #FF1D2F; color: #ffffff;}

.flex-container .grey-arrow:before {border-right: 15px solid #E6E6E6;}
.flex-container .grey-back {background-color: #E6E6E6;}

一切都在一个名为 Flex-container 的 Div 类中。

标签： htmlcsswordpress