我正在用我自己的自定义媒体查询尝试 zurb 基础响应式设计框架。我的网站在这里存在用户名：anders 密码：reading61 现在我的问题是当我在 1200px 和 768px 之间调整网站大小时，带有文本技能的 div 会上下移动，并且前一个 div 之间的距离不一致，什么我希望它一直有大约 20 px 左右的距离，我尝试过绝对位置但是会破坏宽度，因为列与前一个 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(); ?>