Html 为什么我的第三张照片与其他照片不一致？_Html_Css

Html 为什么我的第三张照片与其他照片不一致？

html css

Html 为什么我的第三张照片与其他照片不一致？,html,css,Html,Css,我有一些简单的html和css样式，我正在创建一个包含文章和图片的网站。我不明白为什么我的第三张照片与其他照片不一致。稍微高一点，虽然看起来大小一样。如何使其正确对齐？我不相信我的第三篇文章/图片有什么不同，所以我不明白为什么它看起来不同 index.html <html> <head> <title>Best News Ever!</title> <meta charse

我有一些简单的html和css样式，我正在创建一个包含文章和图片的网站。我不明白为什么我的第三张照片与其他照片不一致。稍微高一点，虽然看起来大小一样。如何使其正确对齐？我不相信我的第三篇文章/图片有什么不同，所以我不明白为什么它看起来不同

index.html

<html>
    
    <head>
        
        <title>Best News Ever!</title>
        <meta charset="UTF-8">
        <meta name="description" content="This page is a webpage to learn html">
        <meta name="keywords" content="html5,udemy,learn code,">


        <meta name="author" content="Reza Zandi">
        <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>Best News Ever!</h1>

            
        </header>



        <section id="top-stories">
            <article>
                <div class="article-image" style= "background:url(dog.jpg)"  ></div>
                <h3>Dog kidnapped by other dog</h3>
                <p>California is no stranger to dog nappings, however, this one takes 
                    the puppies cake... <a href="#">read more..</a></p>
            </article>
        </section>

        <section id="top-stories">
            <article>
                <div class= "article-image" style="background:url(chocolate.jpg)" ></div>
                <h3>Chocolate is actually good for you</h3>
                <p>Scientists have discovered a new propery in chocolate this is good for you. 
                    They discovered that... <a href="#">read more...</a></p>
            </article>
        </section>

        <section id="top-stories">
            <article>
                <div class= "article-image" style="background:url(cat.jpg)" ></div>
                <h3>Cat steals catnip from pet mart</h3>
                <p>A cat in Dallas Texas broke into a petsmart and stole the entire supply of catnip they had.
                    Now that location is struggling to replace the... <a href="#">read more...</a></p>
            </article>
        </section>



    </body>


    <footer>
        <br/><br/>
        <center>&copy;2017<br/>
            <a href='#'>Terms of service</a>

        </center>
    </footer>
</html>

在CSS文件的节类中，尝试将display属性与内联flex一起使用。我在这里附上你的stackblitz链接

原因是内联块的垂直对齐默认位于其基线，在本例中，基线是文本的最后一行。要解决此问题，请将

垂直对齐：top

添加到

部分的CSS中

：

section {
  max-width: 33%;
  display: inline-block;
  vertical-align: top;
}

（正如我在评论中所写，不要多次使用ID，而是使用类）

这里有一些问题，比如复制ID。也就是说，您可以通过调整宽度并使用

垂直对齐：top
在这里拉小提琴：

有史以来最好的消息！
有史以来最好的消息！






&抄袭；2017年

@导入url（'https://fonts.googleapis.com/css2?family=Sriracha&display=swap');
主体h1{
字体系列：“Sriracha”，无衬线；
字体重量：300！重要；
边缘底部：0px；
垫底：20px；
边框底部：2倍实心#000；
}
.头条新闻{
垂直对齐：顶部；
}
部分{
填充：0；
保证金：0；
最大宽度：32%；
显示：内联块；
}
第{}条
.文章图像{
宽度：100%；
高度：200px；
背景尺寸：封面！重要；
背景位置：中心！重要；
}
在这个链接中，你可以知道网格和flex之间的区别

部分{
最大宽度：33%；
显示：inline flex；//或使用的显示：inline grid；
}
我刚刚删除了第三张图片p中的额外文本，然后您的代码运行良好

@导入url（'https://fonts.googleapis.com/css2?family=Sriracha&display=swap');
主体h1{
字体系列：“Sriracha”，无衬线；
字体重量：300！重要；
边缘底部：0px；
垫底：20px；
边框底部：2倍实心#000；
}
#头条新闻{
宽度：1000px；
保证金：自动；
}
部分{
最大宽度：33%；
显示：内联块；
}
第条img{
最大宽度：100%；
}
.文章图像{
宽度：100%；
高度：200px；
背景尺寸：封面！重要；
背景位置：中心！重要；
}

有史以来最好的消息！
有史以来最好的消息！






&抄袭；2017年

这不起作用，因为现在它只是翻转了问题，前两个比第三个高。注意：您正在使用idtop stories三次-这是无效的HTML。使用类来代替。如果我想保持边界，这同样有效。
section {
  max-width: 33%;
  display: inline-flex;
}

section {
  max-width: 33%;
  display: inline-block;
  vertical-align: top;
}

<html>

  <head>
    <title>Best News Ever!</title>
    <meta charset="UTF-8">
  </head>

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

    <section class="top-stories">
      <article>
        <div class="article-image" style="background:url(dog.jpg)"></div>
        <h3>Dog kidnapped by other dog</h3>
        <p>California is no stranger to dog nappings, however, this one takes
          the puppies cake... <a href="#">read more..</a></p>
      </article>
    </section>

    <section class="top-stories">
      <article>
        <div class="article-image" style="background:url(chocolate.jpg)"></div>
        <h3>Chocolate is actually good for you</h3>
        <p>Scientists have discovered a new propery in chocolate this is good for you.
          They discovered that... <a href="#">read more...</a></p>
      </article>
    </section>

    <section class="top-stories">
      <article>
        <div class="article-image" style="background:url(cat.jpg)"></div>
        <h3>Cat steals catnip from pet mart</h3>
        <p>A cat in Dallas Texas broke into a petsmart and stole the entire supply of catnip they had.
          Now that location is struggling to replace the... <a href="#">read more...</a></p>
      </article>
    </section>

  </body>


  <footer>
    <br /><br />
    <center>&copy;2017<br />
      <a href='#'>Terms of service</a>
    </center>
  </footer>

</html>


@import url('https://fonts.googleapis.com/css2?family=Sriracha&display=swap');


body h1 {
  font-family: 'Sriracha', sans-serif;
  font-weight: 300 !important;
  margin-bottom: 0px;
  padding-bottom: 20px;
  border-bottom: 2px solid #000;

}

.top-stories {
  vertical-align: top;
}

section {
  padding: 0;
  margin: 0;
  max-width: 32%;
  display: inline-block;
}

article {}

.article-image {
  width: 100%;
  height: 200px;
  background-size: cover !important;
  background-position: center !important;
}