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

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

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

Answer 3

<强>已更新

像这样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;
}

Answer 4

您提供的HTML无效

</div>
</footer>

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

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

http://jsfiddle.net/4u6rftrL/

如何将1 div分为3个部分

4 个答案: