如何将<article>放在另一个<article>旁边，以便我可以水平放置它们？

时间：2016-10-28 14:28:56

标签： css html5

我遇到了一个问题，我需要在同一条线上放置两个不同的<article>或水平对齐，左边的FirstArticle有宽度，FirstArticle右边的SecondArticle有它的自己的宽度。

.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>

4 个答案:

答案 0 :(得分：0)

一种可能性是在文章上使用float（不在其容器上）并限制其宽度：

基本代码归结为此（下面的代码段更多）：

.Content {
  width: 96%;
}
.FirstArticle, .SecondArticle {
  float: left;
  width: 47%;
}

＆＃13;
＆＃13; 
.MainContent {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  overflow: hidden;
  line-height: 30px;
}
.Content {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  width: 96%;
}
.FirstArticle {
  margin-left: 10px;
  margin-top: 30px;
  float: left;
  width: 47%;
}
.SecondArticle {
  margin-left: 10px;
  margin-top: 30px;
  float: left;
  width: 47%;
}
＆＃13; 
<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!</q>
        </p>
      </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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

首先，你必须给这两篇文章

float:left

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

width:100px。

所以他们看起来像这样：

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

答案 2 :(得分：0)

您可以使用display flex。

检查此代码段

.MainContent {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  overflow: hidden;
}
.Content {
  width: 100%;
  display: flex;
  flex-direction: row;
}
<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!</q>
        </p>
      </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!</q>
        </p>
      </content>
    </article>
  </div>
</div>

希望这有帮助

答案 3 :(得分：0)

使用flexbox：

使用display: flex;类中的.content定义弹性容器。

.content {
  display: flex;
}

这将使每个直接子项成为弹性项目，在本例中为article元素。在此元素中使用flex: 1;来填充flex容器中的所有可用空间。

.first-article {
  flex: 1;
}
.second-article {
  flex: 1;
}

或

.content article{
  flex: 1;
}
  

flex: <positive-number>相当于flex: <positive-number> 1 0。   使弹性项目具有灵活性，并将弹性基础设置为零，   导致一个项目收到指定比例的   flex容器中的可用空间。如果是flex容器中的所有项目   使用这种模式，它们的大小将与指定的成比例   flex因子。

代码段：

＆＃13;
＆＃13; 
.main-content {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  overflow: hidden;
  line-height: 30px;
}
.content {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  width: 48%;
  display: flex;
}
.first-article {
  margin-left: 10px;
  margin-top: 30px;
  flex: 1;
}
.second-article {
  margin-left: 10px;
  margin-top: 30px;
  flex: 1;
}
＆＃13; 
<div class="main-content">
  <div class="content">
    <article class="first-article">

      <header class="header">
        <h2>First Article</h2>
      </header>

      <footer class="footer">
        <p class="post-info">some text for the footer..
        </p>
      </footer>
      <section>
        <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!</q>
        </p>
      </section>

    </article>

    <article class="second-article">

      <header class="second-header">
        <h2>Second Article</h2>
      </header>

      <footer class="footer">
        <p class="post-info">some text for the footer..
        </p>
      </footer>

      <section>
        <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!</q>
        </p>
      </section>
    </article>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

说明：

  • 请勿使用<content>元素，不推荐使用，参考 here 。
  • 小心CSS选择器，即使CSS语法不区分大小写，在某些浏览器中这可能会也可能不会引起问题。除非你逃避，否则你的课程不能以数字开头。
相关问题
最新问题