How to align image and text side by side? HTML CSS flexible box
P粉350036783
P粉350036783 2023-08-26 00:23:03
0
1
444
<p>The text is now aligned below the image. I want the text to be vertically aligned next to the image. I tried adding <code>flex-direction: column</code> and <code>justify-content: center</code> but that didn't work. I also tried <code>float</code> but that didn't work either. I can't figure out how to align text and image side by side. How can I align them side by side? Are there any errors in my code? </p> <p><br /></p> <pre class="brush:css;toolbar:false;">.whoweare { padding: 80px 0px 50px; background-color: #000000; } .whoweare #whoweareimg { width: 100%; min-width: 200px; } .whoweare .content { -webkit-display: flex; display: flex; flex-wrap: wrap; /* flex-direction: column; */ /* justify-content: center; */ } .whoweare .content .box { /* padding:5px; flex:0 0 100%; max-width: 100%; */ padding: 5px; flex: 0 0 100%; max-width: 100%; } .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; }</pre> <pre class="brush:html;toolbar:false;"><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>Who are we</h2> <p>UNDRGRND Muscle & Fitness, street culture meets bodybuilding and fitness lifestyle. Our goal is to provide our members with a unique, modern training experience in the Vaughan/Greater Toronto Area. </br> </br> Experience a unique training atmosphere to help you deliver an unparalleled workout. IFBB Professional Athletes offers exclusive training sessions to help members achieve their lifestyle and/or competition preparation goals. The facility will offer the best fitness equipment on the market including Atlantis, Cyber, Arsenal and more. </br> </br> At UNDRNRGD, we are all one big family, working together. <p><br /></p></pre>
P粉350036783
P粉350036783

reply all(1)
P粉420868294

There seems to be a problem with your HTML code because one of the

is nested inside another
, 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 (

and another
) 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;
}
classes

我们是谁

UNDRGRND Muscle & Fitness,街头文化与健美和健身生活方式相结合。我们的目标是为我们的会员提供独特的现代化培训体验,在Vaughan/GTA地区。

体验独一无二的培训氛围,帮助您进行无与伦比的锻炼。IFBB职业运动员提供独家培训课程,以帮助会员实现他们的生活方式和/或比赛准备目标。该设施将提供市场上最好的健身设备,包括Atlantis、Cyber、Arsenal等。

我们都是一个大家庭,在UNDRNRGD这里我们都在一起。>

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!