Question

我遇到正确显示div的问题。我正在显示有关10本书的信息，我想通过为最后一本书分为3行3行和一行来实现。这是我的第一行看起来像： desired

这是我面临的问题：wrong

我有一个模板，它迭代了我从搜索结果中获得的10本书，然后外部模板显示了属于每本书的10个模板。这是我每张图书卡的模板代码：

                <div class="col-sm-4">
                  <div class="profile-card text-center">
                    <img class="img-responsive" src="https://images.unsplash.com/photo-1454678904372-2ca94103eca4?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925">                  
                    <!-- <img class="img-responsive img-border  center-block" src="{{imageFormatterOne}}{{getLargeImage LargeImage}}" alt=""> -->
                    <div class="profile-info">

                      <img class="profile-pic" src="https://pbs.twimg.com/profile_images/711000557742395396/jzm8hqwW.jpg">

                      <h2 class="hvr-underline-from-center">{{getTitle ItemAttributes}}<span>{{getAuthor ItemAttributes}}</span></h2>
                      <div>Publisher - {{getPublisher ItemAttributes}}<br>
                          Edition - {{getEdition ItemAttributes}}<br>
                          ISBN - {{getISBN ItemAttributes}}<br>
                          Publication Date - {{getPublicationDate ItemAttributes}}<br>
                          Media- {{getProductGroup ItemAttributes}}<br><br></div>
                                  {{#if isVerifiedUser}}   
                    </div>
                  </div>
                </div>

在调用每个卡片模板的外部模板中，我将每个卡片模板包装在一个容器中：

          <div class="container">
            {{#each getSearchResults}}
                {{>searchResult}}
            {{/each}}
          </div>

我尝试做负边距技巧，这就是为什么所有的卡都是垂直连接的，但如果我删除了代码，那么我面临另一个问题就是div改变大小以匹配每张卡的文本数量具有

总结一下，我有两个问题：

1）如何以1行显示3行1行3张卡？编辑：此外，我怎么能对大屏幕做出响应？例如：每行4个，等等...... 2）如何将每个div设置为一个设置大小，以便每个div的大小相同？

非常感谢。

Answer 1

1）如何以3行显示3张卡，1张卡显示1行？

如果你从一个数组或某种类型的列表中提取书籍，我建议使用一个循环，每行显示3本书，条件是检查长度变量是否与当前索引相比较。如果索引大于或等于长度，则书籍将被发布，如果没有，那么它不会退出，不应该做任何事情。这种方式是您稍后将一本书添加到数组中，您不必编辑HTML

或者如果你想要硬编码

使用4行

<div class="row">
  <div class="col-md-4">book 1</div>
  <div class="col-md-4">book 2</div>
  <div class="col-md-4">book 3</div>
</div>

<div class="row">
  <div class="col-md-4">book 4</div>
  <div class="col-md-4">book 5</div>
  <div class="col-md-4">book 6</div>
</div>

<div class="row">
  <div class="col-md-4">book 7</div>
  <div class="col-md-4">book 8</div>
  <div class="col-md-4">book 9</div>
</div>

<div class="row">
  <div class="col-md-4">book 10</div>
  <div class="col-md-8"></div>
</div>

2）如何将每个div设置为一个设置大小，以便每个div的大小相同？

如果您想创建一个应该遵循的书籍风格我建议在每本书的当前模板周围放一个外部，并给该div一个类名

<div class="book">
  <!-- you template -->
</div>

现在，您可以使用css

统一设置此部分的样式

.book {
    height: <what you want>;
    width:  <what you want>;
}

Answer 2

尝试将4个div分开，这样每个div都在自己的行上：

<code>
div1 id=card1, id=card2, id=card3 />
div2 3 cards />
div3 3 cards />
div4 1 card />

then set style rules.
#card1 {
    margin: x x x x;
}
#div1 {
    margin-bottom: x x x x;
}

</code>

应该可以正常工作！

Answer 3

你可以将数组拆分为3块，然后通过这个块循环创建div行容器并在col - * - 4列中显示3本书。

在行中显示10个div

3 个答案: