與Zurb基礎網格嵌套問題

我就告訴你我已經創建了一個的jsfiddle來說明我想要實現：與Zurb基礎網格嵌套問題

http://jsfiddle.net/vraG7/3/embedded/result/

下面是這部分的代碼：

<div class="row"> 
    <div class="twelve columns"> 
     <h2 class="first_column category_title">Nome Categoria</h2> 

     <div class="row"> 
      <div class="nine columns thumbnail"><img 
       src="http://www.placehold.it/125x125" alt=""></div> 
      <div class="three columns date"><time 
       datetime="2013-02-28" >28<br>02<br>2013</time></div> 
     </div> 
     <div class="row"> 
      <div class="twelve columns"> 
       <h2 class="post-title"><a href="">Titolto del post</a></h2> 
      </div> 
     </div> 
    </div> 
</div> 


</div> <!-- category-column -->

我想要做的是讓125x125圖像和日期框在其右側與橙色框與「Nome categoria」具有相同的寬度。我以爲我做的都對，但顯然我錯過了一些東西。

來源

2013-03-02 Carlo

很難說究竟是什麼問題。你壓倒了很多基礎風格。高度，邊距等一堆divs上。

1）您正在將希望對齊的背景顏色應用到<h2>。我建議將它應用於包含<div>。 h2永遠不會做div的邊緣，因此你將無法對齊它們。 2）你將顏色應用到背景的日期。它們可能已經對齊了。如果你改變上述。 3）對於嵌套網格進行故障排除，很容易將panel類添加到所有這些類中，這會增加間距，但讓您看到每個嵌套網格彼此之間的關係。

這是基礎4，但可能是有用的：

http://foundation.zurb.com/grid-example2.php

來源

2013-03-04 01:26:50 JAMESSTONEco

好的，感謝您的意見，我想我解決了這個問題：http://jsfiddle.net/vraG7/4/embedded/結果/ – Carlo 2013-03-04 08:46:44

與Zurb基礎網格嵌套問題

回答

相關問題