独自のカスタム メディア クエリを使用して、zurb ファンデーションのレスポンシブ デザイン フレームワークを試しています。私のサイトはユーザー名: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(); ?>