javascript - 如何让我的 div 以水平方式显示？

Question

我有一个用户可以发帖的网站，前 3 个帖子显示在我的“最赞”部分。我只设置一个 div 的样式，因为当帖子存储在最喜欢的部分时，脚本会自动添加其余的 div，但它们以垂直方式显示，我希望它们是水平的。我将首先分享我的 index.php/html 代码，然后是我的 css。

索引

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;
}

那么，如何让我的 div 以水平方式显示？谢谢指教!

Answer 1

您可以使用 display:flex 在容器内自动添加 div，正如 David787 所说，这应该可以解决问题，否则，可能是我们没有理解您的问题.那么，您能否尝试换一种解释方式？

---

@Zli 很高兴为你工作 :D 。 display:flex 只会影响 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>

在这种情况下，将影响类为“child”的 div，而不是类为“not-a-direct-child”的 div。因此，如果您的文本是下一个案例中的直接子项:

<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>

您可以使用某些属性对齐或对齐该元素(您的文本)，或者只是将文本和 div 放入容器中:

<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>

我真的很推荐你玩这个游戏flexbox froggy我相信您会了解如何作为专家使用 flexbox 并解决很多问题。