“Hello World”，这是我的第一个问题。我连续有 3 篇文章，第 3 篇文章比其他 2 篇文章多答案

【问题标题】："Hello World",This is my first question. I have 3 articles in a row and the third article it's greater than other two“Hello World”，这是我的第一个问题。我连续有 3 篇文章，第 3 篇文章比其他 2 篇文章多
【发布时间】：2020-10-07 06:54:54
【问题描述】：

<html>
<head>
    <title>Best News Ever</title>
    <meta charset="UTF-8">
    <meta name="discription" content="This page is a website to learn HTML">
    <meta name="keywords" content="hmtl5,udemy,learn code">

    <meta name="author" content="Kostas Boukas">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css" />

</head>

<body>

    <header id="main-header">
         <h1 id="site-title">Best News Ever!</h1>
       </header>

       <section id="top-stories">
         <article>
           <div class="article-image" style="background:url(srf.jpg)"> </div>
           <h3 class="h">Surfing all day</h3>
           <p>All you need about surfing<a href="#" class="more-link">Read more</a></p>
         </article>
         <article>
             <div class="article-image" style="background:url(srf1.jpg)"> </div>
             <h3 class="h">Surfing is actually good for you</h3>
             <p>All you need about surfing<a href="#" class="more-link">Read more</a></p>
           </article>

           <article >
             <div class="article-image" id="kapout" style="background:url(srf2.jpg)"></div>
             <h3 class="h">Learn surfing for you</h3>
             <p>All you need about surfing<a href="#" class="more-link bolded-link">Read more</a></p>
           </article>
         </section>
    </body>
    </html>

伙计们，这是我的第一个问题，我希望能给你有用的信息。我连续有 3 篇文章，第三篇文章大于其他两篇文章，我该如何解决这个问题？我想要相同的大小. 如果有人给我答案，我将不胜感激！

【问题讨论】：

“大于其他两个”是什么意思？您是否检查过 css 以查看哪些规则会影响不匹配的文章？您没有包含相关的 css，因此我们没有太多工作要做（我的猜测是您有一些 css 要么针对第一篇文章，要么针对其他需要调整的 css）。
你能更清楚地定义你的问题吗？请看这里，因为这是您的第一个问题。您可以找到许多建议来帮助我们回答您。让你有更多可能得到答案*.com/help/how-to-ask

标签： html css padding margin stylesheet

【解决方案1】：

flex 布局是一个不错的选择。

在下面的 sn-p 中，articles 显示在同一行中。它们具有相同的width 和height。

我添加了padding 和border，这样你就可以看到articles 的边界了。

#top-stories{
  display: flex;
  flex-flow: row nowrap;
}
article {
  flex: 1;
  padding: 5px;
  border: 1px solid gray;
}

<header id="main-header">
  <h1 id="site-title">Best News Ever!</h1>
</header>

<section id="top-stories">
  <article>
    <div class="article-image" style="background:url(srf.jpg)"> </div>
    <h3 class="h">Surfing all day</h3>
    <p>All you need about surfing<a href="#" class="more-link">Read more</a></p>
  </article>
  <article>
    <div class="article-image" style="background:url(srf1.jpg)"> </div>
    <h3 class="h">Surfing is actually good for you</h3>
    <p>All you need about surfing<a href="#" class="more-link">Read more</a></p>
  </article>

  <article>
    <div class="article-image" id="kapout" style="background:url(srf2.jpg)"></div>
    <h3 class="h">Learn surfing for you</h3>
    <p>All you need about surfing you need about surfingyou need about surfingyou need about surfingyou need about surfingyou need about surfing<a href="#" class="more-link bolded-link">Read more</a></p>
  </article>
</section>

【讨论】：

【解决方案2】：

如果您的尺寸是指相同的高度，则需要 CSS。将此添加到您的代码中，它应该可以工作。您可能需要向我们展示 CSS 以获得更好的答案。

<style>
    article {
      height: 100px;
    }
</style>

【讨论】：