javascript - 如何将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