There seems to be a problem with your HTML code because one of the <div class="box text wow slideInRight">
is nested inside another <div class="box text wow slideInRight">
, but anyway, here is the code I came up with to solve your problem.
The idea is.whoweare .content .box:first-child
is your elastic container, its two child elements (<div class="item wow bounceInUp">
and another <div class="box wow text slideInRight">
) will be aligned side by side.
.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)是為我們的會員提供獨特的現(xiàn)代化培訓(xùn)體驗,在Vaughan/GTA地區(qū)。 </br> </br> 體驗獨一無二的培訓(xùn)氛圍,幫助您進(jìn)行無與倫比的鍛煉。IFBB職業(yè)運動員提供獨家培訓(xùn)課程,以幫助會員實現(xiàn)他們的生活方式和/或比賽準(zhǔn)備目標(biāo)。該設(shè)施將提供市場上最好的健身設(shè)備,包括Atlantis、Cyber、Arsenal等。 </br> </br> 我們都是一個大家庭,在UNDRNRGD這里我們都在一起。> </div> </div> </div> </div> </section>