班“粘”在一起

我试图做一个简单的响应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

班“粘”在一起

回答

相关问题