html - 试图让 3 个 div 彼此相邻，同时保持它们的响应，以便堆叠在彼此下面

Question

你好，正如标题已经说过的，我试图让 3 个 div 彼此相邻，同时保持它们的响应性，在这种情况下，如果屏幕尺寸减小，它将尝试自行堆叠，但问题是背景颜色它的盒子不会继续，它仍然认为它只有 1 行，而实际上彼此下面有 3 个，如果不是很清楚，这里是 fiddle 的链接: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 个并排放置时，它会将它们堆叠在彼此下面，同时使 darkbluebox 更高。

我在某些地方读过这可能是我需要清除某些东西的情况，但我现在不太清楚如何以及在哪里，所以所有帮助将不胜感激

Answer 1

正如 hidden Hobbes 评论的那样，添加 overflow:hidden 到容器可以解决您的问题，但是当我遇到同样的问题时，我常常无法使用该解决方案(因为出于不同的目的，溢出可能需要可见或自动。

我经常发现添加

是更好的解决方案

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

在最后一个 float div 下的 html 中: FIDDLE

或者，如果您愿意，您可以在您的 CSS 上添加此代码(相同的解决方案，但代替使用 div，您使用伪元素“之后”)。此解决方案对旧浏览器的兼容性支持稍少。

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

FIDDLE