顯示行中的10個div

我遇到了正確顯示div的問題。我正在顯示關於10本書的信息，並且我希望通過爲最後一本書設置3行3行來做到這一點。這是我的第一行是什麼樣子： desired 顯示行中的10個div

這是我面臨的問題：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）我如何可以顯示3行3卡和1排1卡？編輯：另外，我怎麼能讓這個響應更大的屏幕？例如：每行4個，等等...... 2）如何將每個div設置爲一個設置大小，以便每個div的大小相同？

非常感謝。

來源

2017-07-20 Zorrow2008

不可能明白你想要什麼 – Wordica

1）如何顯示3行1卡1張卡的3張卡？

如果你從一個數組或列表中抽取書籍，我會建議使用一個循環，每行顯示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>; 
}

來源

2017-07-20 21:57:58 ob1

嗨，謝謝你的回覆。關於每行3個的答案是好的。不過，我也希望能夠使整個事情響應，也許不僅限於每行3個。你有這樣做的建議方式？ – Zorrow2008

你是什麼意思的反應？我可以爲你提供一個角度2的例子，你可以嘗試將它轉換爲你正在使用的框架工作！ – ob1

@ Zorrow2008 https://stackoverflow.com/documentation/angular2/6543/angular-forloop/32251/ngfor-x-amount-of-items-per-row#t=201707210015121172889 – ob1

嘗試將4個格分開，以便各自是在其自己的行：

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

應該可以正常工作！

來源

2017-07-20 22:04:10

您可以將數組拆分爲3塊，並通過這個塊創建div行容器並在col - * - 4列中顯示3本書。

來源

2017-07-20 22:05:41 Hectorda

顯示行中的10個div

回答

相關問題