如何将 1 个 div 分成 3 个部分

Question

我要做的就是制作一个横跨整个页面的页脚。并分为 3 个部分/按钮（每个按钮的宽度为 33.333%）。

我尝试了很多代码组合以使其正常工作，但每次都失败了。所以下面的代码不是很有必要，只是我尝试制作这个页脚的方式。 （失败得很惨）

.footerMain {
    width: 100%;
    background-color: green;
    clear: both;
    padding: 20px 0px;
    border: solid 2px;
    display: block;
}


#facebook-div, #youtube-div, #instagram-div {
    float: left;
    margin: 0px;

}

.footerMain div a{
    display: inline-block;
    background-color: red;
    text-align: center;
    height:100%;
}

footer p {
    text-align: center;
    clear: both;
    background-color: darkgreen;
}

HTML：

        <footer>

        <div class="footerMain">

            <div id="facebook-div">
                <a href="#">Facebook</a>
            </div>

            <div id="youtube-div">
                <a href="#">Youtube</a>
            </div>

            <div id="instagram-div">
                <a href="#">Instagram</a>
            </div>
        </div>

        <p>&copyExample.com</p>


    </div>
    </footer>

请帮忙！这让我发疯。

提前致谢:)

Answer 1

您只需要设置内部 DIV 的宽度：

#facebook-div, #youtube-div, #instagram-div {
    float: left;
    margin: 0px;
    width: 33.33%;
}

DEMO

Answer 2

你给的html是无效的

</div>
</footer>

（倒数第二行：不需要/无效的 div）。 我做了一个小提琴，div 的宽度为 33%。这符合您的要求吗？

#facebook-div, #youtube-div, #instagram-div {
    float: left;
    margin: 0px;
    width: 33%;
}

http://jsfiddle.net/4u6rftrL/

Answer 3

.footerMain > div {
    width: 33%;
    float: left;
}

根据您提供的标记，这将是最基本的方式。

Answer 4

更新

像这样http://jsfiddle.net/detezp42/2/

CSS

*{
    margin: 0px;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
}
.footerMain {
    width: 100%;
    background-color: green;
    clear: both;    
    border: solid 2px;
    display: block;
    overflow: hidden;
}
#facebook-div, #youtube-div, #instagram-div {
    float: left;
    margin: 0px;
    width: 33.33%;    
}
.footerMain div a {
    display: inline-block;
    background-color: red;
    text-align: center;
    width:100%;
    padding: 20px 0px;
}
footer p {
    text-align: center;
    clear: both;
    background-color: darkgreen;
}