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]

回答

相關問題