Div's not responsive [foundation]

我已经在PS中设计了一个布局，使用了12列的网格，并且希望在Wordpress中使用它。我使用遐想主题开始，这是一个框架主题thingy在基础上工作。Div's not responsive [foundation]

我得到我的头像它应该工作，但它下面的内容不会调整到屏幕大小。生病后的代码，我有如下：

page.php文件：

<?php get_header(); ?> 
<div class="container"> 
<!-- Row for main content area --> 
    <div class="large-12 medium-12 small-12 columns" id="content" role="main">  
     <div id="top-content" class="large-12 medium-12 small-12"> 
     </div> <!-- end top-content"> 

     <footer> 
      <center><p class="copy">&copy; <?php echo date('Y'); ?> Roelof Plas. Ontwerp door <a href="http://roelofplas.nl" rel="nofollow" title=""><span class="roelof">roelofplas.nl.</span></a> Alle rechten voorbehouden.</p></center> 

     </footer> 
    </div> 
</div> 
<?php get_footer(); ?>

的style.css：

#top-content { 
    width: 1140px; 
    height: 530px; 
    background-color: #63bcb8; 
    z-index: 1000; 
    top: -48px; 
    position: absolute; 
}

什么它应该看起来像（只是turquase DIV ）：

我还未能发表图片（需要2个rep）所以click this.

直播版本：click me

请告诉我，我做错了什么。我读了大量有关基金会和网格等的教程，但我无法做到。

如果你需要更多的信息，请告诉我。

问候，

鲁洛夫普拉斯

SOLUTION BY Joel，感谢队友！不能代表你，但我会尽我所能！：D

来源

2014-09-11 Roelof Plas

删除“width：1140px;”从您的＃顶级内容类中，基础的.columns和.large-12，.medium-12等将处理响应性。

你的页脚没有显示的原因有两个方面：一，你应该用#position：relative替换＃top-content上的position：absolute。使用position：absolute将DIV从DOM流中取出，并使页脚隐藏在它后面。

你也有一个未关闭评论：

侧上面内容“>应该是结束顶级内容 - >

这些变化你的页脚则应该正确显示和主绿松石DIV将成为

来源

2014-09-11 11:33:14 Joel

非常感谢，先生，我不太了解@wikijames他对所需的任何宽度的东西，所以我试着你的awnser这就像一个魅力工作。 – 2014-09-11 11:41:31

> You haven't used "columns" class on this. 
> You don't required any kind of width when you applying "-12" in every class. 
> And if you still willing to provide height on this **ID** "#top-content". then use media query to give width on every other size. 

<div id="top-content" class="large-12 medium-12 small-12">

来源

2014-09-11 11:02:55 wikijames

如果你的问题是通过这个帮助解决的，请检查答案是否正确 – wikijames 2014-09-11 11:15:49

我不明白你的答复，但是谢谢你花时间给我解释一下，感谢！ 3 – 2014-09-11 11:44:33

没关系，没关系 – wikijames 2014-09-12 06:18:50

Div's not responsive [foundation]

回答

相关问题