html - Zurb Foundation 网格高度

Question

我是网站开发的初学者，我使用的是基础框架。我对网格有点问题。你可以看到我的问题截图。我怎样才能将左下 block 移动到这个位置？

    <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

之所以会这样，是因为您使用基础列布局的方式。您在文章中使用了 small-12 medium-6 列类，这意味着每列将占据屏幕的一半(在中型设备上，因为 medium-6 类)。每列都有一个 display:block 规则，它将按照您的图像进行布局。为了实现你想要实现的目标，你需要移动部分标记，你想在上面板下方显示到这篇特定文章的内部，类为 small-12 medium-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>

希望对你有帮助