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>

不確定這是否是最好的方法，但它有效。