How to put all the images in line?-CodePudding

How to make all the images to fall in line? Nothing seems to work...

Is it about the size of the photos? Not used the classes properly?

.fac {
  width: 80%;
  margin: auto;
  text-align: center;
  padding-top: 100px;
}

.col {
  flex-basis: 31%;
  border-radius: 10px;
  margin-bottom: 5%;
  text-align: center;
}

.col img {
  width: 100%;
  border-radius: 10px;
  padding: 5px;
  margin-right: -4px;
}

.col p {
  padding: 0;
}

.col h3 {
  margin-top: 16px;
  margin-bottom: 15px;
  text-align: left;
}

.col p {
  padding: 0;
}

.col h3 {
  margin-top: 16px;
  margin-bottom: 15px;
  text-align: left;
}

<section >
  <h1>Linia de productie sau ceva</h1>
  <p>Yes, I guess?</p>
  <div >
    <div >
      <img src="../photos/stc.jpg">
      <h3>yuo gen roadmap</h3>
      <p>ceva descriere</p>
    </div>
  </div>
  <div >
    <div >
      <img src="../photos/meatthemeat.jpg">
      <h3>Bsalasaaa da</h3>
      <p>dfasd</p>
    </div>
  </div>
  <div >
    <div >
      <img src="../photos/bbc.jpg">
      <h3>aasdasa da</h3>
      <p>adsfd</p>
    </div>
  </div>
</section>

CodePudding user response：

.row for each img makes each one take an individual line for themselves. Just put all .cols containing their imgs in one .row.

CodePudding user response：

it's because you have use row for each img, you can edit code and set display flex for row tag like this HTML :

    <section >
     <h1>Linia de productie sau ceva</h1>
     <p>Yes, I guess?</p>
     <div >
       <div >
         <img src="../photos/stc.jpg">
         <h3>yuo gen roadmap</h3>
         <p>ceva descriere</p>
       </div>
       <div >
         <img src="../photos/stc.jpg">
         <h3>Bsalasaaa da</h3>
         <p>dfasd</p>
       </div>
       <div >
         <img src="../photos/stc.jpg">
         <h3>aasdasa da</h3>
         <p>adsfd</p>
       </div>
     </div>
    </section>

CSS:

.row{
  display : flex;
  justify-content : space-between;
}

CodePudding user response：

Just add a display: flex; to .col class and it will work.