響應式主題2列布局 - 在右側列中的小部件下方包裝文本

我一直在努力研究這一點，並且沒有足夠的知識來了解如何正確實現它（因此它仍然是一個響應式設計）。響應式主題2列布局 - 在右側列中的小部件下方包裝文本

我在測試網站上運行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

[12年4月9日 - 更新HTML代碼來顯示整個頁面，額外頭信息（JavaScript和樣式表）刪除]

來源

2012-07-07 user1508056

這很難說，因爲你的HTML不完整（例如，大部分div都沒有關閉）。然而，.widget-wrapper和.col-300都有底部邊界，如果刪除可能會有所訣竅。

來源

2012-07-07 23:56:15

Henrik，謝謝你的回覆。這兩個元素都沒有底部邊距。但即使我從這兩個邊緣中刪除了所有邊際，它仍然不能按需要工作。 – user1508056 2012-07-09 14:48:18

@ user1508056：好的。您上面提供的代碼似乎與您的「After 2」圖片中使用的代碼不匹配。你能否更新代碼，使其與你的screenprint中使用的代碼相同？這jsfiddle顯示提供的代碼在行動：http://jsfiddle.net/henrikandersson/kZKyd/ – 2012-07-09 15:01:22

這就是我正在尋找的代碼。截圖僅僅是一個模型，而不是一個活的網站。它看起來有點不同（就右列內容/高度而言），因爲我從不同的主題頁面抽取了基本圖像源。它與上面提供的代碼相同。 – user1508056 2012-07-09 22:28:19

響應式主題2列布局 - 在右側列中的小部件下方包裝文本

回答

相關問題