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作为专家并解决很多问题。

如何使div以水平方式显示？

1 个答案: