Question

我使用12列网格在PS中设计了一个布局，并希望它能够在Wordpress中运行。我开始使用Reverie主题，这是一个适用于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个代表），所以click this.

实时版：click me

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

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

此致

Roelof Plas

解决方案来自Joel，谢谢你的伴侣！无法代替你，但我会尽我所能！：d

Answer 1

删除“width：1140px;”来自你的＃top-content类，来自基金会的.columns和.large-12，.medium-12等将负责响应。

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

你还有一个未公开的评论：

end top-content“＆gt;应该是end top-content - ＆gt;

通过这些更改，您的页脚应该正确显示，主绿松石DIV将变得响应。

Answer 2

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

Div没有回应[基础]

2 个答案: