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