如果側立柱高度較長，則立柱上的基座大空間

美好的一天傢伙。對於這個問題，我一直在嘗試幾個小時。我想要達到如下所述的大列位置，但我得到了其他的東西。如果側立柱高度較長，則立柱上的基座大空間

medium    large     What I get 

[ A ] | [ A ][   ] | [ A ][   ] 
--------- | --------- [ B ] |    [ B ] 
[ B ] | [   ][   ] |    [   ] 
--------- | [ C ] --------- | --------- --------- 
[ C ] | [   ][ D ] | [   ][ D ] 
--------- | [   ]    | [ C ] 
[ D ] |       | [   ] 
      |       | [   ]

正如您所看到的，在大屏幕中A和C之間有很大差距。我希望C能夠儘可能地不使用任何黑客而走上空白處。

這是我試過的代碼。

<div class="row profile align-top"> 
    <div id="A" class="column small-12 large-8"> 
     ..... 
    </div> 

    <div id="B" class="column small-12 large-4"> 
     .... 
    </div> 

    <div id="C" class="column small-12 large-8"> 
     .... 
    </div> 

    <div id="D" class="column small-12 large-4"> 
     ..... 
    </div> 
</div>

謝謝你們！

編輯：

添加jfiddle例如： https://jsfiddle.net/k18zw694/2/

來源

2016-02-05 Angelo Ab

你可以做一個jsfiddle嗎？ –

@C.Schubert在這裏它是小提琴。 https://jsfiddle.net/k18zw694/2/ ..謝謝！ –

好吧，你必須這樣做不同的。將其他列中的列嵌套在左側和右側。

<div class="left column small-12 large-6"><!-Content here--></div> 
    <div class="right column small-12 large-6"><!-Content here--></div>

更新fiddle

來源

2016-02-05 14:13:15

在手機上，您的小提琴上的訂單是A，C，B，D。我想它是A，B，C，D。 –

我建議問一個新問題。所以這個答案和人們可以在另一個修復工作，因爲這將需要一些javasascript –

您需要使用的知名度類。我已經爲您準備瞭解決方案，但我已將large替換爲medium。這是必要的，因爲在JSfiddle中我們不能將視口設置得很大。

你必須使用這個網站的旁邊現有row的：

<div class="row show-for-medium"> 
    <div class="medium-8 columns"> 
     <div class="row"> 
      <div id="A" class="column"> 
       <h1> 
        A 
       </h1> 
      </div> 
     </div> 
     <div id="C" class="column"> 
      <h1> 
       C<br>C<br>C<br>C<br> 
      </h1> 
     </div> 
    </div> 
    <div class="medium-4 columns"> 
     <div id="B" class="column"> 
      <h1> 
       B<br>B<br>B 
      </h1> 
     </div> 
     <div id="D" class="column"> 
      <h1> 
       D 
      </h1> 
     </div> 
    </div> 
</div>

爲是明確的，看看這個例子，上的jsfiddle解決方案： https://jsfiddle.net/linkers/fea3evce/2/

來源

2016-02-15 10:56:52

假設你要保留列的順序並且稍後會添加更多的列，那麼您必須使用列堆棧庫，如Masonry，Isotope或Packery來達到您想要的效果。

這些庫將自動定位列以填充由推薦下一行的較高前一列所產生的空白。否則，使用css無法直接實現（除了絕對定位它們，或者也可能是flexbox），並不是Zurb基金會的問題。

來源

2016-02-15 11:17:55 usgmr

如果側立柱高度較長，則立柱上的基座大空間

回答

相關問題