如何将4个盒子集中在一起并排?

时间:2014-10-20 07:19:17

标签: html css

    <section id="main-content">
        <div class="language-box html">HTML</div>
        <div class="language-box javascript">JAVACRIPT</div>
        <div class="language-box css">CSS</div>
        <div class="language-box php">PHP</div>
        <div class="clear"></div>
    </section>

我试图让这4个盒子集中并排放在一起。

我正在使用此代码,但它无法正常工作:

#main-content {
    margin: 0 auto;
}


.language-box {
    width: 279px;
    height: 400px;
    background-color: white;
    float: left;
    margin: 0 auto;
}

http://i.imgur.com/V2DPlRa.png

3 个答案:

答案 0 :(得分:1)

您可以移除浮动,将项目显示为inline-block并将text-align: center设置为容器。

#main-content {
    margin: 0 auto;
    text-align: center;
    width: 100%;
}


.language-box {
    width: 80px;
    border: 1px solid #000000;
    height: 400px;
    background-color: white;
    /* float: left;
    margin: 0 auto; */
    display: inline-block;
}

小提琴:http://jsfiddle.net/9k2ae5vv/

答案 1 :(得分:0)

你需要在float元素之后清除:     #main-content {overflow:hidden}

答案 2 :(得分:0)

你必须为包装器设置宽度,一切都会好的。

#main-content {
    margin: 0 auto;
    width: calc(4 * 279px);
}

working example