CSS布局问题

Question

我面临的问题是我的页面内容应该在<div id="content">这是灰色框内，所有其他页面都位于除此之外的内容内。

这是我迄今为止尝试过的名为home1.php的代码。 JSFiddle

这是我的index.php片段代码

<div id="content">

    <?php include_once("home1.php"); ?>

</div>  

我怀疑来自 CSS 的代码给了我这个问题，你们能给我解决这个问题的解决方案吗？ 非常感谢（对不起，我的英语不好）

更新

添加 PhillipXT 建议的float:none后，它可以工作，但左侧的排列应为“pengumuman”，左侧为“2nd Content Area”。

Answer 1

我没有使用你的代码，因为它包含损坏的 html 和应该在其他元素中的元素。

但这是您可以用于“两列布局”的布局的基本结构。

您浮动容器 div 并清除容器。 Clearfix 将解决您的浮动问题。阅读 clearfix

提琴手

<div class="container clearfix">
  <div class="left_container">

  </div>
  <div class="right_container">

  </div>
</div>

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.container {}

.left_container {
  background-color: aqua;
  float: left;
  height: 400px;
  width: 200px;
}

.right_container {
  background-color: aquamarine;
  float: left;
  height: 400px;
  width: 300px;
}

Answer 2

看来你使用了太多的浮点数。 您可以考虑使用 inline-block 或

flexbox（如果你不关心 IE9）

Answer 3

这看起来像是浮动 div 标签的问题。 我通常通过在浮动列之后添加另一个空 div 来修复它，并将float设置为none ：

这是结构的外观：

<div id="content">
    <div id="isi">...</div>
    <div id="middle">...</div>
    <div style="float:none; clear:both;"></div>
</div>

不确定这是否是最好的方法，但它有效。