班「粘」在一起

我試圖做一個簡單的響應1/1頁網站HTML5 + CSS3，這將有一個的下面幾節的一個大滾動頁面上，像這樣：班「粘」在一起

Section 1 
[content] 

Section 2 
[content] 

Section 3 
[content]

對於某種原因，在修復「about」部分的css時，它似乎已經「卡住」到它下面的「連接」部分（請參閱此jsfiddle）。它在寬屏幕上正確顯示，但在窄屏幕上（如jsfiddle中的屏幕可能會顯示），「連接」類將放置在「關於」部分的圖像下方，即右側。

當我檢查元素和連接類，他們看起來很奇怪。他們兩個似乎都失去了他們的內容，而「連接」類認爲它的內容高於它而不是下面？

我不知道我破了什麼，但它似乎也許我失去了明顯的東西。任何幫助將不勝感激！

HTML

CSS

.aboutContainer { 
    display: block; 
    width: 100%; 
    margin: 0 auto; 
} 

.aboutText { 
    display: inline; 
    width: 60%; 
    height: auto; 
    margin: 0; 
    float: left; 
} 

.aboutImg { 
    display: inline; 
    display: block; 
    width: 30%; 
    float: right; 
    margin: 0; 
} 

.aboutImg img { 
    min-width: 240px; 
} 

.connect { 
    width: 100%; 
    display: inline; 
    vertical-align:bottom; 
} 

.links { 
    float: left; 
    width: 35%; 
} 

.connect ul { 
    width: 100%; 
    display: inline; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

.connect li { 
    display: inline; 
} 

.connect img { 
    display: inline; 
    width: 32%; 
}

來源

2014-08-28 moonie457

前connect格添加以下。

<div class='clearfix'></div>

而且下面的CSS：

.clearfix { 
    clear: both; 
}

聽到的是jsfiddle

來源

2014-08-28 14:56:34 Bongs

感謝煙槍！這確實很好地處理了定位，但about和connect類似乎仍然是'空'（檢查元素 - >將鼠標懸停在

...

和

...

之間。像素尺寸不包含其內容，並且在連接類中似乎完全清空（0px x 0px））。由於我有一個「畫廊」級以上這兩個似乎行爲幷包括其內容，我擔心這兩個可能仍然會在某個地方被打破？ – moonie457 2014-08-28 16:03:16

這是因爲你在'content' div裏面有浮動元素，你需要仔細處理。我會建議你使用像twitter-bootstrap這樣的前端框架。我在'connect'裏面移動了'clearfix'並且改變了'connect'的'css' - 'display：block;'。覈實。 – Bongs 2014-08-28 16:26:39

見http://jsfiddle.net/Bongs/zjc5znp3/2/ – Bongs 2014-08-28 16:27:02

班「粘」在一起

回答

相關問題