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>