为什么我的 div 会互相推倒？

Question

我正在尝试使用一些浮动 div 和其他东西创建一个响应式设计。 在我的标题和图像滑块下方，我的主要内容有一个 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

我以前遇到过这种情况，它通常与高度有关，即使它偏离 1px，它也会像布局 2 中那样显示错误。这是因为所有框都向左浮动，如果它碰到另一个框它将在新的一行继续。

我建议尝试为你的盒子设置一个确定的高度而不是自动，看看是否能解决它。

希望对你有帮助

Answer 2

我相信由于所有 4 张图片都是向左浮动的，因此调整大小会影响它们，即使你给它们的 父 div 一个更大的 width 它们也会浮动在 1 行.

在left div里面，创建2个普通的divs，在第一个div里面放一个浮动的左图，一个浮动的右图，在第二个div里面做同样的事情。

-----------------------------------------
|               |      |                |
|               |      |                |
|               |      |                |
|               |      |                |
|               |      |                |
-----------------------------------------
-----------------------------------------
|               |      |                |
|               |      |                |
|               |      |                |
|               |      |                |
|               |      |                |
-----------------------------------------

如果你给左边的 div 和它里面的 div 一个最小宽度也会更好。

min-width:100px;

更新：另一种可能的解决方案

如果您页面的最大 width 是 960px;，则给 Left Parent Div 一个 min-width:500px; 和 Right Parent Div 一个 min-width:400px; 这样，当你重新调整大小时，它们会保持一个固定的宽度并且不会变小，这意味着它们不会影响它们内部浮动元素的顺序。

Answer 3

你的问题是百分比单位和边距。

使用百分比进行响应式设计的真正方法是不要使用“边距”，当你使用边距时，你会犯错，0.01% 的错误会使你的所有布局都失败。您需要使用包装器和“填充”来制作它。

现在，当您使用填充时，您可以这样做

* {
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
}

这种代码的和平使您的所有页面都在内部填充是指当您使用 50% 制作盒子并放置 50% 填充时，填充是从盒子内部计算的。并且您可以计算百分比而不用担心错误的 0.01%。

Answer 4

尽量把parent设为1000px左右，并以像素为单位给出宽度，这样当你调整大小或放大或缩小时，你可以避免这种情况。