"Hello World",这是我的第一个问题。我连续有 3 篇文章，第三篇文章比其他两篇文章大

Question

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

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

Answer 1

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

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

Answer 2

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

在下面的代码段中，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>

"Hello World",这是我的第一个问题。我连续有 3 篇文章，第三篇文章比其他两篇文章大

"Hello World",This is my first question. I have 3 articles in a row and the third article it's greater than other two

html

css

margin

padding

stylesheet