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中有什麼，以及它爲什麼在那裏。我已經使用了風格重置，但就是這樣。 –
其實我只是試過了。一個非常不錯的工具。但是，它並沒有解決我的問題。 –