Zurb基金會網格高度

Question

即時網站開發初學者，我使用基礎框架。 而我有一個網格問題。你可以看到我的問題的截圖。我怎樣才能將左下角塊移動到這個位置？

<section class="row"> 
    <article class="small-12 medium-6 columns"> 
    <div class="panel"> 
     <h2><a href="#">Lorem ipsum</a></h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit minima impedit, eius maiores distinctio beatae. Culpa hic ducimus atque sint, quae voluptatem numquam similique neque ea saepe, minima, inventore eum?</p> 
     <img src="http://placehold.it/800x100" alt=""> 
     <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Products</a></li> 
     <li><a href="#">Works</a></li> 
     <li><a href="#">Portfolio</a></li> 
     <li><a href="#">Company</a></li> 
     <li><a href="#">Contacts</a></li> 
     </ul> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis assumenda ad necessitatibus odio quae eum soluta, autem quos natus nisi aperiam beatae fugiat odit vel. Animi, assumenda unde quidem inventore.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio modi velit, recusandae quis veritatis ut beatae ipsum. Ab voluptate aperiam omnis nihil placeat. Dolorum veniam molestias doloribus, neque voluptatibus? Sed.</p> 
    </div>   
    </article> 

    <article class="small-12 medium-6 columns"> 
    <div class="panel"> 
     <h2><a href="#">Lorem ipsum</a></h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis assumenda ad necessitatibus odio quae eum soluta, autem quos natus nisi aperiam beatae fugiat odit vel. Animi, assumenda unde quidem inventore.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio modi velit, recusandae quis veritatis ut beatae ipsum. Ab voluptate aperiam omnis nihil placeat. Dolorum veniam molestias doloribus, neque voluptatibus? Sed.</p> 
    </div>   
    </article> 

    <article class="small-12 medium-6 columns"> 
    <div class="panel"> 
     <h2><a href="#">Lorem ipsum</a></h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis assumenda ad necessitatibus odio quae eum soluta, autem quos natus nisi aperiam beatae fugiat odit vel. Animi, assumenda unde quidem inventore.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio modi velit, recusandae quis veritatis ut beatae ipsum. Ab voluptate aperiam omnis nihil placeat. Dolorum veniam molestias doloribus, neque voluptatibus? Sed.</p> 

     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum nisi doloribus sed earum temporibus. Libero reprehenderit perferendis nemo, minus deserunt dignissimos amet tempora enim placeat. Dolorem laboriosam, ipsum iste nisi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, placeat. Aliquid beatae corporis magni. Unde maiores, sit perspiciatis atque sed architecto quos pariatur repudiandae animi dolores quisquam. Quasi, suscipit, pariatur.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt voluptates corporis accusamus fugit placeat praesentium quam debitis ipsam perferendis, consequuntur, labore voluptate dolorum pariatur officiis, veniam, consectetur cumque nisi mollitia?</p> 
    </div>   
    </article> 

    <article class="small-12 medium-6 columns"> 
    <div class="panel"> 
     <h2><a href="#">Lorem ipsum</a></h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis assumenda ad necessitatibus odio quae eum soluta, autem quos natus nisi aperiam beatae fugiat odit vel. Animi, assumenda unde quidem inventore.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio modi velit, recusandae quis veritatis ut beatae ipsum. Ab voluptate aperiam omnis nihil placeat. Dolorum veniam molestias doloribus, neque voluptatibus? Sed.</p> 
    </div>   
    </article> 


    <article class="small-12 medium-6 columns"> 
    <div class="panel"> 
     <h2><a href="#">Lorem ipsum</a></h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis assumenda ad necessitatibus odio quae eum soluta, autem quos natus nisi aperiam beatae fugiat odit vel. Animi, assumenda unde quidem inventore.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio modi velit, recusandae quis veritatis ut beatae ipsum. Ab voluptate aperiam omnis nihil placeat. Dolorum veniam molestias doloribus, neque voluptatibus? Sed.</p> 
    </div>   
    </article> 
</section> 

Answer 1

原因，這種方式是因爲你使用的基礎列布局的方式。 您已經在文章上使用了小型12中-6列的類，這意味着每列將佔據屏幕的一半（在中型設備上，因爲中型6級）。每一列都有一個display：block規則，它會像你的圖像一樣放置它。爲了實現您想要實現的目標，您需要將標記的一部分（您希望顯示在上面板下方）移至此特定文章的內部，並帶有小型12中6列。 我得到了修改加價爲：

<section class="row"> 
    <article class="small-12 medium-6 columns"> 
    <div class="panel"> 
     <h2><a href="#">Lorem ipsum</a></h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit minima impedit, eius maiores distinctio beatae. Culpa hic ducimus atque sint, quae voluptatem numquam similique neque ea saepe, minima, inventore eum?</p> 
     <img src="http://placehold.it/800x100" alt=""> 
     <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Products</a></li> 
     <li><a href="#">Works</a></li> 
     <li><a href="#">Portfolio</a></li> 
     <li><a href="#">Company</a></li> 
     <li><a href="#">Contacts</a></li> 
     </ul> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis assumenda ad necessitatibus odio quae eum soluta, autem quos natus nisi aperiam beatae fugiat odit vel. Animi, assumenda unde quidem inventore.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio modi velit, recusandae quis veritatis ut beatae ipsum. Ab voluptate aperiam omnis nihil placeat. Dolorum veniam molestias doloribus, neque voluptatibus? Sed.</p> 
    </div> 


    <div class="panel"> 
     <h2><a href="#">Lorem ipsum</a></h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis assumenda ad necessitatibus odio quae eum soluta, autem quos natus nisi aperiam beatae fugiat odit vel. Animi, assumenda unde quidem inventore.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio modi velit, recusandae quis veritatis ut beatae ipsum. Ab voluptate aperiam omnis nihil placeat. Dolorum veniam molestias doloribus, neque voluptatibus? Sed.</p> 
    </div>   
    </article> 

    <article class="small-12 medium-6 columns"> 
    <div class="panel"> 
     <h2><a href="#">Lorem ipsum</a></h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis assumenda ad necessitatibus odio quae eum soluta, autem quos natus nisi aperiam beatae fugiat odit vel. Animi, assumenda unde quidem inventore.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio modi velit, recusandae quis veritatis ut beatae ipsum. Ab voluptate aperiam omnis nihil placeat. Dolorum veniam molestias doloribus, neque voluptatibus? Sed.</p> 
    </div> 
    </article> 

    <article class="small-12 medium-6 columns"> 
    <div class="panel"> 
     <h2><a href="#">Lorem ipsum</a></h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis assumenda ad necessitatibus odio quae eum soluta, autem quos natus nisi aperiam beatae fugiat odit vel. Animi, assumenda unde quidem inventore.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio modi velit, recusandae quis veritatis ut beatae ipsum. Ab voluptate aperiam omnis nihil placeat. Dolorum veniam molestias doloribus, neque voluptatibus? Sed.</p> 

     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum nisi doloribus sed earum temporibus. Libero reprehenderit perferendis nemo, minus deserunt dignissimos amet tempora enim placeat. Dolorem laboriosam, ipsum iste nisi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, placeat. Aliquid beatae corporis magni. Unde maiores, sit perspiciatis atque sed architecto quos pariatur repudiandae animi dolores quisquam. Quasi, suscipit, pariatur.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt voluptates corporis accusamus fugit placeat praesentium quam debitis ipsam perferendis, consequuntur, labore voluptate dolorum pariatur officiis, veniam, consectetur cumque nisi mollitia?</p> 
    </div>   
    </article> 

    <!-- <article class="small-12 medium-6 columns"> 
    <div class="panel"> 
     <h2><a href="#">Lorem ipsum</a></h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis assumenda ad necessitatibus odio quae eum soluta, autem quos natus nisi aperiam beatae fugiat odit vel. Animi, assumenda unde quidem inventore.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio modi velit, recusandae quis veritatis ut beatae ipsum. Ab voluptate aperiam omnis nihil placeat. Dolorum veniam molestias doloribus, neque voluptatibus? Sed.</p> 
    </div>   
    </article> --> 


    <article class="small-12 medium-6 columns"> 
    <div class="panel"> 
     <h2><a href="#">Lorem ipsum</a></h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis assumenda ad necessitatibus odio quae eum soluta, autem quos natus nisi aperiam beatae fugiat odit vel. Animi, assumenda unde quidem inventore.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio modi velit, recusandae quis veritatis ut beatae ipsum. Ab voluptate aperiam omnis nihil placeat. Dolorum veniam molestias doloribus, neque voluptatibus? Sed.</p> 
    </div>   
    </article> 
</section> 

希望這將有助於

Answer 2

在css文件試試這個：
ul
{
float :left;
}
li
{
float: right;
}