css - 为什么我的 div 互相推倒？

Question

我正在尝试使用一些 float div 和其他内容创建响应式设计。 在我的标题和图像 slider 下方，我有一个用于主要内容的 div。在这里我有 2 个 div，一个向左浮动，一个向右浮动。在右边的 div 中，我在一个列中有 3 个 div。在左边的 div 中，我有 4 个 div 都向左浮动，它们将像这样定位:

Image - Layout OK

这是我的问题 - 当我调整浏览器宽度时，左侧容器 div 中的两个底部 div 移动如下:

Image - Layout NOT OK

我尝试过使用 clearfix，但这似乎没有解决问题，现在我被卡住了。

谁能告诉我我在这里做错了什么 - 请! ;o)

上面的屏幕截图来自 Chrome 浏览器。任何其他浏览器(Safari、firefox、Opera)都会显示相同的错误，但始终如此。不仅是当我将大小时调整为小于页面内容时。

我希望有人能帮我解决这个问题。有点沮丧;o( 在下面，您将找到我的代码。谢谢!

//杰斯珀

HTML: 内容

        <div id="content-wrap" class="centered">
            <div id="fp-branding-area">
                <!-- nivo slider here -->
            </div>
            <div id="content-main">
                <div class="fp-box-main">
                    <img src="images/fp_box1.jpg" alt="Alttext1">
                    <h1 class="box-caption">Caption1</h1>
                </div>
                <div class="fp-box-main"><img src="images/fp_box2.jpg" alt="Alttext2">
                    <h1 class="box-caption">Caption2</h1>
                </div>
                <div class="fp-box-main"><img src="images/fp_box3.jpg" alt="Alttext3">
                    <h1 class="box-caption">Caption3</h1>
                </div>
                <div class="fp-box-main"><img src="images/fp_box4.jpg" alt="Alttext4">
                    <h1 class="box-caption">Caption4</h1>
                </div>
            </div> <!-- /end #content-main -->
            <div id="content-side">
                <div class="fp-box-side">
                    <img src="images/fp_box_side1.jpg" alt="Side Alttext1">
                    <h1 class="box-caption">SideCaption1</h1>   
                </div>
                <div class="fp-box-side">
                    <img src="images/fp_box_side2.jpg" alt="Side Alttext2">
                    <h1 class="box-caption">SideCaption2</h1>
                </div>
                <div class="fp-box-side">
                    <img src="images/fp_box_side3.jpg" alt="Side Alttext3">
                    <h1 class="box-caption">SideCaption3</h1>
                </div>
            </div> <!-- /end #content-side -->
        </div> <!-- /end #content-wrap -->
    </div> <!-- /end #page -->

    <footer id="footer-main">
        <div id="footer-wrap" class="centered">
            Content
        </div>
    </footer>
</body>

CSS:

h1, h2, h3, h4, hgroup {
  font-family: Avenir;
  font-size: 1.18em;
  letter-spacing: .05em;
}

.centered {
  position: relative;
  margin: 0 auto;
}

.full-width {
  width: 960px;
}

#page {
  background: url(../images/gradient_page.png) repeat-x;
  min-height: 100%;
  width: 100%;
}

#header-main {
  height: 137px;
  background: url(../images/bg_header.jpg);
}

#header-wrap {
  width: 960px;
}

#content-wrap {
  background: url(../images/web-dropshadow_header.png) center top no-repeat;
  width: 100%;
  max-width: 960px;
  overflow: auto;
  padding-bottom: 136px;
  /* must be same height as the footer */
}

#fp-branding-area {
  width: 100%;
  margin-top: 2.11361%;
  background-color: #c6c6c6;
}

#content-main {
  width: 78.85416666666667%;
  /* ((757 / 960) * 100) */
  float: left;
  margin-bottom: 2.11361%;
}

#content-side {
  width: 21.14583333333333%;
  /* ((203 / 960) * 100) */
  float: left;
}

.fp-box-main {
  position: relative;
  width: 47.88639%;
  /* ((362.5 / 757) * 100) */
  margin: 2.11361% 2.11361% 0 0;
  float: left;
  overflow: hidden;
  clear: none;
}

.fp-box-main img, .fp-box-side img {
  width: 100%;
  margin-bottom: -3px;
}

.fp-box-side {
  position: relative;
  margin-top: 7.88177%;
  width: 100%;
  overflow: hidden;
  clear: both;
}

.fp-box-side h1 {
  font-size: .8em;
}

.box-caption {
  background-color: black;
  color: #FFF;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  width: 90%;
  padding: 5%;
  bottom: 0;
}

#footer-main {
  position: relative;
  margin-top: -136px;
  /* negative value of footer height */
  height: 136px;
  clear: both;
  background-color: white;
}

#footer-wrap {
  width: 960px;
}

Answer 1

尝试将父级设置为 1000 像素左右，并以像素为单位给出宽度，这样当您调整大小或放大或缩小时，就可以避免这种情况。