javascript - 如何将1 div分为3个部分

我要做的就是创建一个页脚，覆盖整个页面。并分为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>

请帮忙！这让我发疯。

提前致谢 ：）

最佳答案

您提供的html无效

</div>
</footer>

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

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

http://jsfiddle.net/4u6rftrL/