试图让3个div彼此相邻，同时保持响应，使堆栈在彼此之下

Question

您好，因为标题已经说过我试图让3个div彼此相邻而同时保持它们的响应，在这种情况下如果屏幕尺寸减小它会尝试堆叠自己哪个有效但问题是背景颜色它不会继续，它仍然认为它只有1行，而实际上有3个在彼此之下，如果它不完全清楚这里是一个小提琴的链接：http：//jsfiddle.net/Lsqxn1fy/

h1 {
  font-size: 18px;
  text-align: center;
}
#darkbluebox {
  background-color: #151723;
  width: 100%;
  padding: 0px 0px 100px 0px;
}
#container {
  position: relative;
  margin: 0 auto;
  top: 45px;
  background-color: #04040E;
  width: 75%;
  /* 960 / 70% */
  clear: both;
}
#textarea {
  position: relative;
  margin: 0 auto;
  width: 80%;
  padding: 20px 0px 20px 0px;
  color: #ECECEC;
}
#websites {
  position: relative;
  margin: 0 auto;
  width: 65.2%;
  padding: 20px 0px 0px 0px;
  height: 270px;
}
#imagebox {
  position: relative;
  height: 220px;
  width: 200px;
  float: left;
  display: inline;
  margin-left: 10px;
  margin-right: 10px;
}
#JekerpmcK {
  background-color: red;
  height: 200px;
  width: 200px;
}
#BuenaVistaK {
  background-color: blue;
  height: 200px;
  width: 200px;
}
#OAA {
  background-color: purple;
  height: 200px;
  width: 200px;
  color: #fff;
  text-align: center;
}
#TekstvakK {
  height: 20px;
  width: 200px;
  font-family: helvetica, arial, sans-serif;
  color: #fff;
  text-align: center;
  margin-bottom: 50px;
}

<div id="darkbluebox">
  <div id="container">
    <div id="textarea">
      <h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sed.</p><br><br>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sedadipiscing elit sed.</p></h1>

    </div>
    <div id="websites">
      <div id="imagebox">
        <div id="JekerpmcK">

        </div>
        <div id="TekstvakK">
          JekerPMC
        </div>
      </div>

      <div id="imagebox">
        <div id="BuenaVistaK">

        </div>
        <div id="TekstvakK">
          BuenaVistaHoliday
        </div>
      </div>

      <div id="imagebox">
        <div id="OAA">
          Under construction!
        </div>
        <div id="TekstvakK">
          OAA Consultancy
        </div>
      </div>
    </div>


  </div>
</div>

所以最新发生的事情就是当网站意识到它不能让所有3个彼此相邻时它会将它们堆叠在彼此之下，同时使黑暗盒更高。

我已经阅读了一些地方，这可能是我需要澄清的事情，但我现在不知道如何以及在哪里，所以所有的帮助将不胜感激

Answer 1

隐藏的Hobbes评论添加溢出：隐藏到容器修复你的问题，但是当我遇到同样的问题时，我不能使用该解决方案（因为溢出可能需要可见或自动用于不同目的。

我经常发现添加

是更好的解决方案

<div style="clear:both"></div>

在您上一个浮动div下的html中： FIDDLE

或者如果你愿意你可以在你的CSS上添加这个代码（相同的解决方案，但是在“之后使用假元素”）。该解决方案对旧浏览器的兼容性较低。

#container:after {
    content:' ';
    clear:both;
    display:block;
    width:100%;
}

<强> FIDDLE