2

3 つの列が他のすべての列と正しく整列していませんか? 私のヘッダー、フッター、特集はすべて揃っていますが、それは複数ではなく単一の 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 に答える