Question

我一直在努力解决这个问题并且不够精明，不知道如何正确实现它（这样它仍然是一个响应式设计）。

我在测试网站上运行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代码以显示整个页面，删除了额外的头部信息（javascript和样式表）]

Answer 1

很难分辨，因为你的HTML不完整（例如，大部分div都没有关闭）。但是，.widget-wrapper和.col-300都有底部边距，如果删除可能会有效。

响应主题2列布局 - 在右列中的小部件下包装文本

1 个答案: