Question

我正在尝试使用zurb基础响应式设计框架和我自己的自定义媒体查询。我的网站存在here用户名：anders密码：reading61现在我的问题是当我在1200px和768px之间调整网站大小时，文字技能上下移动并且它没有t在前一个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(); ?>

Answer 1

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

试图在调整大小时保持div不改变高度位置

1 个答案: