0

私はこれに少し取り組んできましたが、それを正しく実装する方法を知るのに十分な知識がありません（レスポンシブデザインのままです）。

テスト サイトで ThemeID による無料の「レスポンシブ」ワードプレス テーマを実行しており、単一の記事ページの本文コンテンツ テキストを右側のサイドバーの下にラップし、時間の経過とともにサイドバーの高さが変化するのに合わせて「動的に」調整する必要があります。この右側のサイドバーに「アーカイブ」ウィジェットを配置する予定なので、時間の経過とともに高さが大きくなります...したがって、本文テキストは、サイドバーの下部に到達するまでサイドバーの下に拡張しないでください。私が言いたいことを示すために、私が本当に素早く作ったモックアップを見てください。

前: http://www.heliossolutions.net/responsive.jpg

2の後: http://www.heliossolutions.net/responsive3.jpg

ご覧のとおり、現在、テキストはサイドバーの下に大きな空白を残していますが、下に流れてサイドバーの高さに適応できるようにしたいと考えています。また、テーマのレスポンシブな性質を維持し、モバイル デバイスで正しく動作する必要があります (つまり、サイドバー ウィジェットは、すぐに使用できるように、携帯電話で表示したときにすべてのコンテンツの下に適切に表示される必要があります)。

これは理にかなっていますか？

現在、ページ コードは次のようになっています。

    <!doctype html>
    <!--[if lt IE 7 ]> <html class="no-js ie6" dir="ltr" lang="en-US"> <![endif]-->
    <!--[if IE 7 ]>    <html class="no-js ie7" dir="ltr" lang="en-US"> <![endif]-->
    <!--[if IE 8 ]>    <html class="no-js ie8" dir="ltr" lang="en-US"> <![endif]-->
    <!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" dir="ltr" lang="en-US"> <!--<![endif]-->
    <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>Title</title>
    <meta name="template" content="Responsive 1.6.9" />
    </head>
    <body class="single single-post postid-36 single-format-standard">
    <div id="container" class="hfeed">
            <div id="header">
            <div id="logo">
            </div><!-- end of #logo -->  
                    <ul class="menu"><li >Home</li></ul>
        </div><!-- end of #header -->
            <div id="wrapper" class="clearfix">
            <div id="content" class="grid col-620">
                <div id="post-36" class="post-36 post type-post status-publish format-standard hentry category-web-development">
                    <div class="post-meta">
                    <span class="meta-prep meta-prep-author">Posted on </span> July 2, 2012</span>                                          
                    </div><!-- end of .post-meta -->
                         <div class="post-entry">
                             <p>Post content here.Post content here.Post content here.Post content here.Post content here.Post content here.Post content here.Post content here.</p>                    
                         </div><!-- end of .post-entry -->
                    <div class="post-data">
                    </div><!-- end of .post-data -->             
                <div class="post-edit"></div>             
                </div><!-- end of #post-36 -->
            <div id="respond">
                <h3 id="reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/blog/parallax-slider/#respond" style="display:none;">Cancel reply</a></small></h3>
                        <p class="must-log-in">You must be logged in to post a comment.</p>
</div><!-- #respond -->
               </div><!-- end of #content -->
               <div id="widgets" class="grid col-300 fit">
                    <div class="widget-wrapper">
                    <div class="widget-title">In Archive</div>
                        <ul>
                        </ul>
                </div><!-- end of .widget-wrapper -->
                    </div><!-- end of #widgets -->    </div><!-- end of #wrapper -->
        </div><!-- end of #container -->
    <div id="footer" class="clearfix">
        <div id="footer-wrapper">
            <div class="grid col-940">
            <div class="grid col-540">
                     </div><!-- end of col-540 -->
             <div class="grid col-380 fit">
             <ul class="social-icons"></ul><!-- end of .social-icons -->         </div><!-- end of col-380 fit -->
             </div><!-- end of col-940 -->
            <div class="grid col-300 copyright">
                &copy; 2012
            </div><!-- end of .copyright -->
            <div class="grid col-300 scroll-top"><a href="#scroll-top" title="scroll to top">&uarr;</a></div>
            <div class="grid col-300 fit powered">

            </div><!-- end .powered -->
        </div><!-- end #footer-wrapper -->
    </div><!-- end #footer -->
    </body>
    </html>

そして、対応するCSS（正確な問題を特定できないため、十分すぎるほどのものを提供しようとしました）：

#content {
    margin-bottom:20px;
}

.grid {
    float:left;
    margin-bottom:2.127659574468%;
    padding-top:0;
}

.col-60, 
.col-140, 
.col-220, 
.col-300, 
.col-380, 
.col-460, 
.col-540, 
.col-620, 
.col-700, 
.col-780, 
.col-860 {
    display:inline;
    margin-right:2.127659574468%;
}

.col-620 {
    width:65.957446808511%;
}

.post-meta {
    clear:both;
    color:#9f9f9f;
    font-size:13px;
    margin-bottom:10px;
}

.post-entry {
    clear:both;
}

.post-data {
    clear:both;
    font-size:11px;
    font-weight:700;
    margin-top:20px;
}

.post-edit {
    clear:both;
    display:block;
    font-size:12px;
    margin:1.5em 0;
}

#widgets {
    margin-top:40px;
}

.col-300 {
    width:31.914893617021%;
}

.fit {
    margin-left:0!important;
    margin-right:0!important;
}


.widget-wrapper {
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    background-color:#f9f9f9;
    border:1px solid #d6d6d6;
    border-radius:6px;
    font-size:13px;
    margin:0 0 20px;
    padding:20px;
}


.clearfix:after, 
#container:after, 
.widget-wrapper:after {
    clear:both;
    content:"\0020";
    display:block;
    height:0;
    max-height:0;
    overflow:hidden;
    visibility:hidden;
}


.clearfix, 
#container, 
.widget-wrapper {
    display:inline-block;
}

.clearfix, 
#container, 
.widget-wrapper {
    display:block;
}

これを行う方法についてのアイデアはありますか？私はそれが可能であり、おそらく単純な変更であることを知っています.

ありがとう

[2012 年 4 月 9 日 - HTML コードを更新してページ全体を表示し、余分なヘッド情報 (javascript とスタイル シート) を削除]

4

1 に答える 1

0

HTMLが完全ではないため（たとえば、ほとんどのdivが閉じられていないため）わかりにくいです。ただし、.widget-wrapperと.col-300の両方に下マージンがあり、削除するとうまくいく可能性があります。

于 2012-07-07T23:56:15.717 に答える