Question

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

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

这是我的代码：

＆＃13;

#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%;
}

＆＃13;

<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>

＆＃13;

我注意到的另一件事是，当我转到显示多个博客的页面时，CouchCMS会自动创建另一个新闻内容DIV。我认为这可能是问题而浮动：右边是让侧边栏显示在页面的右下角，因为它出现在第二个新闻内容之后，但如果这是问题，我不知道如何解决它。我一直在以不同的方式重新安排我的代码，试着看看我是否可以修复它并且现在已经在网上搜索了几个小时并且没有找到解决方案。

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>

CouchCMS - 浮动元素未正确浮动

1 个答案: