html - CouchCMS - float 元素未正确 float

Question

我是新来的，也是 Html 和 CSS 的初学者。我目前正在开发一个元素，使用 CouchCMS 进行内容管理，然后使用 Bootstrap 进行响应式框架。为了简要介绍一下背景，我设置了一个 custom.css 文件并将其相应地链接到网站以及 Bootstrap css。我目前正在执行创建“博客列表”页面以在一个页面上列出我所有博客片段的步骤，基本上发生的事情是侧边栏出现在右侧，但在第一个元素下方而不是并排出现。

我注意到，页面上只有 1 个帖子，它显示了它应该显示的方式，但是一旦添加了第 2 个，它就会移动到右侧页面的下半部分。

这是我的代码:

#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 :右边使侧边栏出现在页面的右下半部分，因为它出现在第二个新闻内容之后，但是如果这是问题所在，我不知道如何修理它。我一直在以不同的方式重新安排我的代码，以尝试看看是否可以修复它，现在我已经在网上搜索了几个小时，但没有找到任何解决方案。

Answer 1

好吧，现在我觉得自己像个白痴。我在重新排列代码时弄明白了。我所要做的就是更改我的 cms:pages 开始和结束标签，使其只包含帖子的内容，而不包含 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>