Css 尝试在调整大小时阻止div更改高度位置

我正在用我自己的自定义媒体查询试验zurb基金会响应式设计框架。我的站点存在用户名：anders密码：Reading 61现在我的问题是当我在1200px和768px之间调整站点大小时，带有文本skills的div会上下移动，并且它与前一个div之间的距离不一致，我希望它在整个时间内都有大约20px的距离，我已经尝试过使用绝对位置hower来打破宽度，因为列与前面的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(); ?>

---

我最终只是将图像位置设置为绝对位置。

您也可以使用“@media screen and（orientation:grait）{}”或横向