試圖讓div在更改高度位置時調整大小

Question

我正在用我自己的自定義媒體查詢來試驗zurb基礎響應式設計框架。我的網站存在here與用戶名：anders密碼：reading61現在我的問題在這裏是當我調整網站之間的1200px和768px的div與文本技能上下移動，它沒有一致的距離之前的div ，我希望它整個時間大約有20像素左右的距離，我嘗試過打破寬度的絕對位置，因爲列與以前的div不同，因爲它基於zurbs css。希望這不會讓人困惑。

這裏是我的CSS

/* Artfully masterminded by ZURB */ 

/* -------------------------------------------------- 
    Table of Contents 
----------------------------------------------------- 
:: Shared Styles 
:: Page Name 1 
:: Page Name 2 
*/ 


/* ----------------------------------------- 
    Shared Styles 
----------------------------------------- */ 
body{ 
    background-color: #ffffff; 

} 
.rounded{ 
    -moz-border-radius: 15px; 
    -webkit-border-radius: 10px; 
    -khtml-border-radius: 20px; 
    border-radius: 10px; 
    list-style-type: none; 
    float:left; 
    padding: 5px; 
    margin-right: 10px; 
    background: -webkit-gradient(linear, left top, left bottom, from(#f0eeed), to(#b9b5af)); 
    background: -moz-linear-gradient(top, #f0eeed, #b9b5af); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0eeed', endColorstr='#b9b5af'); 
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
    box-shadow: 0 1px 2px rgba(0,0,0,.2); 
} 
.rounded a{ 
    color: #000000; 
    font-weight: bold; 
} 
/* ----------------------------------------- 
    home.php 
----------------------------------------- */ 
#logoNav div{ 
    float: left; 
} 
.logo{margin-right: 10px; margin-top: 10px; } 
.logoLarge{margin-top: 20px;} 
.mainContent{ 
    padding-top: 20px; 
} 
.plus { 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    -khtml-border-radius: 10px; 
    border-radius: 10px; 
    list-style-type: none; 
    float:left; 
    padding: 11px; 
    margin-right: 10px; 
    background: -webkit-gradient(linear, left top, left bottom, from(#f0eeed), to(#b9b5af)); 
    background: -moz-linear-gradient(top, #f0eeed, #b9b5af); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0eeed', endColorstr='#b9b5af'); 
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
    box-shadow: 0 1px 2px rgba(0,0,0,.2); 
} 
.more{ 
    padding-top: 10px; 
    display:block; 
} 
#profilePic img{ 
    border: solid 5px #765745; 
    padding: 10px; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    -khtml-border-radius: 10px; 
    border-radius: 10px; 
    margin-top: 30px; 
} 
.mainContent p{font-size: 24px;} 
.mainMore{ 
    margin-top:-150px; 
} 
/* ----------------------------------------- 
    Page Name 1 
----------------------------------------- */ 
/* Smartphones (portrait and landscape) */ 
@media only screen 
and (min-width : 0px) 
and (max-width : 767px) { 
#header{margin-top: 10px;} 
#profilePic{display: none;} 
.logoLarge{display:none;} 
.mainContent p{font-size: 14px;} 
.mainContent {margin-top: -22px;} 
.mainMore{display:none;} 
} 
@media only screen 
and (max-width: 1200px) 
and (min-width: 768px) { 
.main{font-size:28px; margin-top: 110px; margin-left: 10px;} 
#mainNav{margin-left: 20px;} 
.logo{display:none;} 
.noMore{display:none;} 
.mainMore{ 
    position: absolute; 
} 
#mainMore{height:fixed;} 
.mainContent p{font-size: 14px;} 

} 
@media only screen 
and (min-width: 1201px) { 
.main{font-size:28px; margin-top: 110px; margin-left: 10px;} 
#mainNav{margin-left: 20px;} 
.logo{display:none;} 
.noMore{display:none;} 
.rounded{ 
    border-radius:0px; 
    padding: 10px; 
    margin-right: 10px; 
    background: none; 
    box-shadow: none; 
} 

} 



/* ----------------------------------------- 
    Page Name 2 
----------------------------------------- */ 

這裏是我的HTML/PHP的

<?php 
/* 
Template Name:Home Page 
*/ 
?> 
<?php get_header(); ?> 
<div class="row mainContent"> 
    <div class="seven columns mainContent"> 
     <?php 
     $page_id = 2; // 123 should be replaced with a specific Page's id from your site, which you can find by mousing over the link to edit that Page on the Manage Pages admin page. The id will be  embedded in the query string of the URL, e.g. page.php?action=edit&post=123. 

     $page_data = get_page($page_id); // You must pass in a variable to the get_page function. If you pass in a value (e.g. get_page (123);), WordPress will generate an error. By default, this will return an object. 

     echo apply_filters('the_content', $page_data->post_content); // echo the content and retain Wordpress filters such as paragraph tags. Origin from: http://wordpress.org/support/topic/get_pagepost-and-no-paragraphs-problem 
?> 
    <p class="noMore"><a href="http://localhost:8888/austin.kitson.orgWP/more"><span class="plus">+</span><span class="more">more..</span></a></p> 
    </div> 
    <div id="profilePic" class="five columns"> 
     <img src="<?php bloginfo('template_directory'); ?>/images/austin.jpg" title="austin kitson" /> 
    </div> 
</div><!--row ends--> 
<div class="row"> 
    <div id="mainMore" class="seven columns mainContent mainMore"> 
     <?php 
     $page_id = 33; // 123 should be replaced with a specific Page's id from your site, which you can find by mousing over the link to edit that Page on the Manage Pages admin page. The id will be   embedded in the query string of the URL, e.g. page.php?action=edit&post=123. 

     $page_data = get_page($page_id); // You must pass in a variable to the get_page function. If you pass in a value (e.g. get_page (123);), WordPress will generate an error. By default, this will return an object. 

     echo apply_filters('the_content', $page_data->post_content); // echo the content and retain Wordpress filters such as paragraph tags. Origin from: http://wordpress.org/support/topic/get_pagepost-and-no-paragraphs-problem 
?> 
    </div> 
</div><!--row ends--> 
<?php get_footer(); ?> 

Answer 1

我最終只是讓絕對圖像位置。