How can I make my div's appear in a horizontal way?

Question

I have a website where users can post and the top 3 posts are showing in my MOST LIKED section. I style just one div because the script automatically adds rest of the divs when the post is stored in a most liked section, but they're showing in a vertical way, and I want them to be horizontal. I'll first share my index.php/html code and then my css.

Index

var list2 = $("<div class='testimonial-area spmostliked bg1'><div class='container' id='mostliked'><div class='section-title white'><h2>Most Liked Regrets</h2>");
                            var count = 1;

                            for (var t = 0; (t < data.length); t++)
                            {
                               var comment = data[t]; 
                               if(comment['parent_comment_id'] == '0'){
                                  var commentId = comment['comment_id'];


                                  var out = $('<li>').html('<figure class="snip1167"><img src="https://images.freecreatives.com/wp-content/uploads/2016/03/22054222/Flat-Wings-Logo-Design.jpg" alt="sq-sample17"/><blockquote>' + comment['comment'] + '</blockquote><div class="author"><h5>First Name <span> $DATE</span></h5></div></figure>');
                                  list2.append(out);

                                  count++;                                 
                               }                    
                               if(count > 3){
                                    break;
                               }        
                            }
                            $("#output2").html(list2); 

CSS

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
@import url(https://fonts.googleapis.com/css?family=Raleway:400,800);
figure.snip1167 {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 220px;
  max-width: 310px;
  width: 100%;
  color: #333;
  text-align: left;
  box-shadow: none !important;
}
figure.snip1167 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
figure.snip1167 img {
  max-width: 100%;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  margin: 0 auto;
  display: block;
  z-index: 1;
  position: relative;
}
figure.snip1167 blockquote {
  margin: 0;
  display: block;
  border-radius: 8px;
  position: relative;
  background-color: #fafafa;
  padding: 65px 50px 30px 50px;
  font-size: 1em;
  font-weight: 500;
  margin: -50px 0 0;
  line-height: 1.6em;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
figure.snip1167 blockquote:before,
figure.snip1167 blockquote:after {
  font-family: 'FontAwesome';
  content: "\201C";
  position: absolute;
  font-size: 50px;
  opacity: 0.3;
  font-style: normal;
}
figure.snip1167 blockquote:before {
  top: 70px;
  left: 20px;
}
figure.snip1167 blockquote:after {
  content: "\201D";
  right: 20px;
  bottom: 0;
}
figure.snip1167 .author {
  padding: 15px;
  margin: 0;
  color: #ffffff;
  text-align: right;

}
figure.snip1167 .author h5 {
  opacity: 0.8;
  margin: 0;
  font-weight: 800;
    color: white;
}
figure.snip1167 .author h5 span {
  font-weight: 400;
    text-transform: none;
  display: block;
    color: white;
}

So, how can I make my divs appear in a horizontal way? Thanks in advice!

Answer 1

You could add the divs automatically inside a container with display:flex, as David787 said, this should fix it, if not, maybe we are not understanding your problem. In that case, can you try to explain it in another way?

---

@Zli I am so glad that worked for you :D . The display:flex will affect only the direct children of the div.

<div class="father">
     <div class="child">
          <div class="not-a-direct-child"></div>
     </div>
     <div class="child">
          <div class="not-a-direct-child"></div>
     </div>
     <div class="child">
          <div class="not-a-direct-child"></div>
     </div>
</div>

In this case will affect the divs with the class "child", not the divs with the class "not-a-direct-child". So, if your text is a direct child like in the next case:

<div class="father">
     <h2 class="child-too">
     <div class="child">
          <div class="not-a-direct-child"></div>
     </div>
     <h2 class="child-too">
     <div class="child">
          <div class="not-a-direct-child"></div>
     </div>
     <h2 class="child-too">
     <div class="child">
          <div class="not-a-direct-child"></div>
     </div>
</div>

You can align or justify that item (your text) with some properties or just putting the text and the divs inside a container:

<div class="father">
     <div class="child">
          <h2 class="not-a-direct-child>
          <div class="not-a-direct-child"></div>
     </div>
     <div class="child">
          <h2 class="not-a-direct-child>
          <div class="not-a-direct-child"></div>
     </div>
     <div class="child">
          <h2 class="not-a-direct-child>
          <div class="not-a-direct-child"></div>
     </div>
</div>

I really recommend you to play this game flexbox froggy and I am sure you will understand how to use flexbox as an expert and to solve a lot of things.