0

我已经为此工作了一段时间，但不够精明，不知道如何正确实现它（这样它仍然是一个响应式设计）。

我在测试站点上运行 ThemeID 的免费“响应式”wordpress 主题，需要将单篇文章页面的主体内容文本包裹在右侧边栏下方，并随着侧边栏随时间变化高度而“动态”调整。我计划在此右侧边栏中添加“存档”小部件，因此随着时间的推移，它的高度会增加……因此正文不应延伸到边栏下方，直到它到达边栏的底部。看一下我快速制作的模型，以证明我的意思。

之前：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;
}

关于如何做到这一点的任何想法？我知道这是可能的，而且可能是一个简单的改变，我只是不够擅长响应式 CSS 来看到它！

感谢：D

[4/9/12 - 更新了 HTML 代码以显示整个页面，删除了额外的 Head 信息（javascript 和样式表）]

4

1 回答 1

0

很难说，因为您的 HTML 不完整（例如，大多数 div 都没有关闭）。但是， .widget-wrapper 和 .col-300 都有底部边距，如果删除可能会起作用。

于 2012-07-07T23:56:15.717 回答