2
我试图用一些浮动div和东西创建一个响应式设计。 在我的标题和图像滑块下面，我有一个div用于显示主要内容。在这里，我有2个div，一个向左漂浮，一个向右漂浮。在正确的div中，我有3个div在一个单一的柱子。在左侧的div我有4个格都向左浮动，这将使他们是这样的：为什么我的div推倒对方？
这里是我的问题 - 当我调整我的浏览器的宽度，在左侧div容器将两分底部的div像这样：
我试图用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;
}
你有没有想过使用CSS框架？ – Danny
我已经考虑过了。但是，我想知道我的css中有什么，以及它为什么在那里。我已经使用了风格重置，但就是这样。 –
其实我只是试过了。一个非常不错的工具。但是，它并没有解决我的问题。 –