Question

我希望将div容器彼此对齐并且我已经实现了它，我现在的问题是：有更好的方法吗？或者这样做是否正确。

编辑：

我有另外一个问题，假设div的宽度不是33.33％但更像是20％，我如何均匀地将它们分开？

小提琴链接：

http://jsfiddle.net/robindashwood/fNB5A/

这是我的代码，请参考ID为BodyColumn1到3的div。我的index.html代码

<body>
    <div id="MainContainer">
        <div id="HeaderContainer">
            <div id="LogoContainter">
                <img class="RoundedImg" src="Images/300x100stock.png">
            </div>
            <div id="NavigatieContainer">
                <ul id="nav">
                <!-- LVL 1 -->
                    <li>
                        <a href="Index.html">Item 1</a>
                    </li>
                    <li>
                        <a href="#">Item 2</a>
                    </li>
                    <li>
                        <a href="#">Item 3</a>
                    </li>
                    <li>
                        <a href="#">Item 4</a>
                    </li>
                </ul>
            </div>
        </div>
        <div id="BannerContainer">
            <img class="RoundedImg" src="Images/1000x400stock.png">
        </div>
        <div id="BodyContainer">
            <div id="BodyColumn1">
                <p>Test</p>
            </div>
            <div id="BodyColumn2">
                <p>Test</p>
            </div>
            <div id="BodyColumn3">
                <p>Test</p>
            </div>
        </div>
    </div>
</body>

处理布局的css代码：

/*Basic tags*/
body {
    background-color: #efebdf;
}

/*DIV ID's*/
div#MainContainer {
    width: 1000px;
    margin-left:auto;
    margin-right:auto;
    overflow: auto;
}

div#HeaderContainer {
    position: relative;
    overflow: auto;
    margin-bottom: 30px;
}

div#LogoContainter {
    float: left;
    position: relative;
    margin-top: 2%;
    border-radius: 0.5em;
}

div#NavigatieContainer {
    float: right;
}

div#BannerContainer {
    position: relative;
    border-radius: 0.5em;
    margin-bottom: 30px;
}

div#BodyContainer {
    position: relative;
    border-radius: 0.5em;
}

div#BodyColumn1 {
    float: left;
    width: 33.33%;
    background-color: red;
}

div#BodyColumn2 {
    float: left;
    width: 33.33%;
    background-color: yellow;
}

div#BodyColumn3 {
    float: left;
    width: 33.33%;
    background-color: pink;
}

/*IMG's*/
img.RoundedImg {
    border-radius: 0.5em;
}

Answer 1

您可以使用内联块值显示属性

div#BodyColumn1 { display: inline-block; width: 33.3%; }

Answer 2

这是一个正确的方法和crossbrowser imo。

如果您需要，可以尝试对其他显示属性执行相同操作，或尝试使用新的Flexbox。

对齐三个div彼此相邻

2 个答案: