Il semble y avoir un problème avec votre code HTML car l'un des <div class="box text wow slideInRight">
嵌套在另一個(gè)<div class="box text wow slideInRight">
est dedans, mais quoi qu'il en soit, voici le code que j'ai trouvé pour résoudre votre problème.
L'idée est .whoweare .content .box:first-child
是您的彈性容器,它的兩個(gè)子元素(<div class="item wow bounceInUp">
和另一個(gè)<div class="box text wow slideInRight">
) de les aligner c?te à c?te.
.whoweare { padding: 80px 0px 50px; background-color: #000000; } .whoweare #whoweareimg { width: 100%; min-width: 200px; } .whoweare .content .box { padding: 5px; max-width: 100%; } .whoweare .content .box:first-child { display: flex; } .whoweare .content #whoweareimg { width: 50%; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); padding: 30px; } .whoweare .content h2 { font-size: 50px; font-weight: 500; margin: 20px; color: #ffffff; padding: 0px 0px 20px; } .whoweare .content p { font-size: 20px; line-height: 50px; color: #ffffff; margin: 20px; padding: 0px 0px 20px; font-family: 'Open Sans', sans-serif; }
<section class="whoweare" id="whoweare"> <div class="container"> <div class="content"> <div class="box text wow slideInRight"> <!-- <div class="class-items"> --> <div class="item wow bounceInUp"> <!-- <div class="item-img"> --> <img id="whoweareimg" src="https://via.placeholder.com/50" alt="classes" /> </div> <div class="box text wow slideInRight"> <h2>我們是誰</h2> <p>UNDRGRND Muscle & Fitness,街頭文化與健美和健身生活方式相結(jié)合。我們的目標(biāo)是為我們的會(huì)員提供獨(dú)特的現(xiàn)代化培訓(xùn)體驗(yàn),在Vaughan/GTA地區(qū)。 </br> </br> 體驗(yàn)獨(dú)一無二的培訓(xùn)氛圍,幫助您進(jìn)行無與倫比的鍛煉。IFBB職業(yè)運(yùn)動(dòng)員提供獨(dú)家培訓(xùn)課程,以幫助會(huì)員實(shí)現(xiàn)他們的生活方式和/或比賽準(zhǔn)備目標(biāo)。該設(shè)施將提供市場上最好的健身設(shè)備,包括Atlantis、Cyber、Arsenal等。 </br> </br> 我們都是一個(gè)大家庭,在UNDRNRGD這里我們都在一起。> </div> </div> </div> </div> </section>