Zurb基金会网格高度

时间：2014-09-29 10:00:04

标签： html css zurb-foundation

我是网站开发的初学者，我使用的是基础框架。 我对电网有一点问题。您可以通过我的问题查看我的屏幕截图。我怎样才能将左下方块移动到这个位置？

enter image description here 

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

2 个答案:

答案 0 :(得分：0)

在css文件中

试试这个：
    ul
    {
        float :left;     
}
li
{
  float: right;
}

答案 1 :(得分：0)

这种方式的原因是因为您使用基础列布局的方式。 您已经在文章中使用了小型12中6列课程，这意味着每列将占据屏幕的一半（在中型设备上，因为中等6级）。每列都有一个display：block规则，它将在图像中显示出来。为了实现您想要实现的目标，您需要移动标记的一部分，您希望在上面板下方显示，以及使用class-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>

希望这会有所帮助

相关问题
最新问题