css - 我怎样才能将一个 放在另一个 的旁边，以便我可以水平放置它们？

Question

我遇到了一个问题，我需要把两个不同的 <article> s 在同一行或水平对齐，FirstArticle 位于左侧，宽度相同，SecondArticle 位于 FirstArticle 的右侧，宽度相同。

.MainContent {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    overflow: hidden;
    line-height: 30px;
}

.Content {
    float: left;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    width: 48%;
}

.FirstArticle {
    margin-left: 10px;
    margin-top: 30px;
}

.SecondArticle {
    margin-left: 10px;
    margin-top: 30px;
}

<div class="MainContent">
    <div class="Content">
        <article class="FirstArticle">
            <header class="Header">
                <h2>First Article</h2>
            </header>
            <footer class="Footer">
                <p class="post-info">some text for the footer..
                </p>
            </footer>
            <content>
                <p><q>All good people agree,
					And all good people say,
					All nice people, like Us, are We
					And every one else is They:
					But if you cross over the sea,
					Instead of over the way,
					You may end by (think of it!)
                    looking on We
					As only a sort of They!</p></q>
            </content>
        </article>
        <article class="SecondArticle">
            <header class="2Header">
                <h2>Second Article</h2>
            </header>
            <footer class="Footer">
                <p class="post-info">some text for the footer..
                </p>
            </footer>
            <content>
                <p><q>All good people agree,
					And all good people say,
					All nice people, like Us, are We
					And every one else is They:
					But if you cross over the sea,
					Instead of over the way,
					You may end by (think of it!) looking 
                    on We
					As only a sort of They!</p></q>
            </content>
        </article>
    </div>
</div>

Answer 1

首先你必须给两篇文章一个

float :左

然后你给他们一个特定的宽度，例如

宽度:100px。

所以他们看起来像这样:

.FirstArticle {
    margin-left: 10px;
    margin-top: 30px;
    width: 100px;
    float: left;
}
.SecondArticle {
    margin-left: 10px;
    margin-top: 30px;
    width: 100px;
    float: left;
}