2

我的三列没有与其他所有内容正确对齐？我的页眉、页脚、特色都是对齐的，但那是因为它是一个 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>
4

2 回答 2

2

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

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

.column1, .column2, .column3 {
        background-color: #efefef;
        width: 30%;
        float: left;
        margin: 10px;
        display: inline-block;
 }
于 2013-02-11T00:52:12.980 回答
1

我将文章的宽度设置为 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;
}
于 2013-02-11T01:27:16.037 回答