CouchCMS - 浮動元素不能正確浮動

Question

我是新來的，也是Html和CSS的初學者。我目前正在使用CouchCMS進行內容管理，然後使用Bootstrap作爲響應式框架。爲了給出一個簡短的背景，我已經建立了一個custom.css文件，並將其相應地鏈接到網站以及引導CSS。我目前正在執行創建「博客列表」頁面的步驟，以便在一個頁面上列出我的所有博客摘要，基本上發生的情況是側欄出現在右側，但低於第一個元素而不是並排。

我注意到，頁面上只有1個帖子顯示了它應該的方式，但是隻要添加了第二個，它就會移動到右側頁面的下半部分。

這裏是我的代碼：

#main { 
 
    width: 90%; 
 
    margin: 40px auto; 
 
} 
 
#news-content { 
 
    float: left; 
 
    width: 60%; 
 
    margin: 0 3% 0 5.5%; 
 
    border-radius: 10px; 
 
    background-color: white; 
 
} 
 
#my-sidebar { 
 
    float: right; 
 
    width: 26%; 
 
    height: 100%; 
 
    margin: 0 5.5% 0 0; 
 
    border-radius: 10px; 
 
    background-color: white; 
 
} 
 
#cms-blog { 
 
    width: 90%; 
 
    height: inherit; 
 
    margin: 25px 0 0 5%; 
 
}

<div id="main"> 
 
    <cms:pages masterpage='news_entry.php' orderby='publish_date' order='asc'> 
 
    <!--Begin of CouchCMS Blog List--> 
 

 
    <div id="news-content"> 
 
     <!--Wrapper for Left Side Blog Content--> 
 

 
     <div id="cms-blog"> 
 
     <h1><a href="<cms:show k_page_link />"><cms:show k_page_title /></a></h1> 
 
     <cms:if k_page_foldertitle> 
 
      <cms:set my_category=k_page_foldertitle /> 
 
      <cms:else /> 
 
      <cms:set my_category='Uncategorized' /> 
 
     </cms:if> 
 
     <h6><a href="#"><cms:show my_category /></a> &bull; <cms:date k_page_date format='M jS, y' /> &bull; <a href="#">     <cms:show k_comments_count /> Comments</a></h6> 
 
     <hr /> 
 
     <img src="<cms:show blog_image />" alt="" width="100%" /> 
 
     <cms:show blog_content /> 
 
     <p class="clearfix"><a href="news_entry.php">Read More...</a> 
 
     </p> 
 
     </div> 
 
    </div> 
 
    </cms:pages> 
 
    <!--End of CouchCMS Blog List--> 
 

 
    <div id="my-sidebar"></div> 
 
    <!--Wrapper for Sidebar--> 
 

 
    <div style="clear: both;"></div> 
 
</div>

我注意到另一件事是，當我去這表明多個博客的頁面，CouchCMS自動創建另一個新聞內容DIV。我認爲這可能是問題，float：right會讓側邊欄出現在頁面的右下角，因爲它出現在第二個新聞內容之後，但是如果這是問題，我不知道如何修理它。我一直在以不同的方式重新整理我的代碼，試圖看看我是否可以修復它，並且一直在網上搜索幾個小時，但沒有找到解決方案。

Answer 1

現在，我覺得自己像一個白癡。我在重新安排代碼時想通了。我所要做的只是將我的cms：頁面的開始和結束標籤更改爲僅包含帖子的內容而不是div標籤。一旦我做出改變，它立即顯示出我想要的。

我的新代碼如下所示：

<div id="main"> 
 
    <div id="news-content"> 
 
    <div id="cms-blog"> 
 
     <cms:pages masterpage='news_entry.php' orderby='publish_date' order='asc'> 
 
     <!-- I changed this to go after the beginning div tags instead of before--> 
 

 
     <h1><a href="<cms:show k_page_link />"><cms:show k_page_title /></a></h1> 
 
     <cms:if k_page_foldertitle> 
 
      <cms:set my_category=k_page_foldertitle /> 
 
      <cms:else /> 
 
      <cms:set my_category='Uncategorized' /> 
 
     </cms:if> 
 
     <h6><a href="#"><cms:show my_category /></a> &bull; <cms:date k_page_date format='M jS, y' /> &bull; <a href="#"><cms:show k_comments_count /> Comments</a></h6> 
 
     <hr /> 
 
     <img src="<cms:show blog_image />" alt="" width="100%" /> 
 
     <cms:show blog_content /> 
 
     <p class="clearfix"><a href="news_entry.php">Read More...</a> 
 
     </p> 
 
     </cms:pages> 
 
     <!--I changed this to come before the closing div tags instead of after--> 
 

 
    </div> 
 
    </div> 
 
    <div id="my-sidebar"></div> 
 
    <div style="clear: both;"></div> 
 
</div>