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（下面，您将找到我的代码。谢谢！

//的Jesper

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

我相信，由于所有4张图片都会向左浮动，调整大小会影响它们，即使你给它们的父div 更大的宽度它们会漂浮在1行

在左侧div 内，创建2个普通 divs ，在第一个div中，放置一个浮动的左图像和一个浮动的右图像，并在第二个div中执行同样的事情。

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

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

min-width:100px;

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

如果您的网页的最大width为960px;，则为左侧父级提供min-width:500px;和右侧父级以这种方式min-width:400px;，当你重新调整大小时，它们将保持固定的宽度并且不会变小，这意味着它们不会影响它们内部浮动元素的顺序。

Answer 2

尝试制作大约1000像素的父级并以像素为单位给出宽度，以便在调整大小或放大或缩小时，可以避免这种情况。

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

我之前遇到过这个问题，它通常与高度有关，即使它被1px关闭也会像布局2那样错误显示。这是因为所有的框都浮动到左边，如果它碰到另一个框它将继续在新的一条线上。

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

希望这有帮助

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

4 个答案: