列在页脚中显示在彼此之下

时间:2014-08-18 05:49:59

标签: html css multiple-columns

列在页脚中显示在彼此下方。尝试了每个栏目的ID并添加了“浮动:左”和“#39;在每一个 - 没有任何区别。它似乎并不是唯一的冲突,因为即使h4标题显示​​为段落...... 网站:http://e54.5b1.myftpupload.com/

<div id="footer">
    <div class="footerFloat">
        <h4>Header 1</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div class="footerFloat">
        <h4>Header 2</h4>
        <ul>
            <li>Line 1</li>
            <li>Line 2</li>
            <li>Line 3</li>
            <li>Line 4</li>
        </ul>
    </div>
    <div class="footerFloat">
        <h4>Header 3</h4>
        <ul>
            <li>Line 1</li>
            <li>Line 2</li>
            <li>Line 3</li>
            <li>Line 4</li>
        </ul>
    </div>
    <div class="footerFloat">
        <h4>Header 4</h4>
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

CSS样式:

#wrapper {
    width: 100%;    
    max-width: 980px;
    margin: auto;
} 

#footer {
    width: 100%;
} 

.footerFloat {
    width: 25%;
    float: left;
}

2 个答案:

答案 0 :(得分:1)

您的代码运行正常。 http://jsfiddle.net/3u5qrL4k/

.footerFloat {
width: 25%;
float: left;
}

您的网页上的css中没有.footerFloat课程http://e54.5b1.myftpupload.com/

答案 1 :(得分:-1)

我不知道为什么人们在明确错误时说你的代码是正确的。你有很多错误,请检查HTML Validation。基本上,你有几个未闭合的元素,其中最重要的元素是......头部。检查第683到698行,你会看到未封闭头部内的标题和导航,然后是主体,然后是滑块...好吧,非常混乱。无论如何,检查该链接并完成每个错误,您将轻松解决所有问题