Question

我的三列与其他所有内容都没有正确对齐？我的页眉，页脚，精选都是对齐的，但这是因为它是一个div而不是多个。演示：http://jsfiddle.net/Zevoxa/3LDUd/

<body>
    <div id="header">
        <h1>LOGO</h1>
        <div id="nav">
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">Products</a></li>
                <li><a href="">Services</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Contact</a></li>
            </ul>
        </div>
    </div>
    <div id="content">
        <div id="feature"><div style="text-align:center">
            <p>Feature<p>
        </div>
        <div class="article column1">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
        <div class="article column2">
            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
        </div>
        <div class="article column3">
            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.</p>
        </div>
    </div></div>
    <div id="footer"><div style="text-align:center">
        <p>&copy; Copyright 2013</p>
    </div></div>
</body>
</html>

Answer 1

http://jsfiddle.net/persianturtle/3LDUd/1/

您将宽度设置为33.3px而不是百分比。

.column1, .column2, .column3 {
        background-color: #efefef;
        width: 30%;
        float: left;
        margin: 10px;
        display: inline-block;
 }

Answer 2

我已经将文章的宽度设为33％，而是在其中放置了

标签的10px边距。还添加了一个更清晰的div，请在此处查看：

http://jsfiddle.net/dzHgX/

.column1, .column2, .column3 {
    background-color: #efefef;
    width: 33%;
    float: left;
    display: inline-block;
}
.column1 p, .column2 p, .column3 p {
    margin: 10px;
}

如何完美地对齐我的所有div？

2 个答案: