时间戳

首页 > 解决方案 > 为什么我的第三张图片不与其他图片对齐？

html - 为什么我的第三张图片不与其他图片对齐？

问题描述

我有一些简单的 html 和 css 样式，我正在创建一个包含文章和图片的网站。我不明白为什么我的第三张照片与其他照片不一致。它略高一些，但看起来大小相同。我怎样才能让它正确对齐？我不相信我对我的第三篇文章/图片做任何不同的事情，所以我不明白为什么它看起来不同。

在此处输入图像描述

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

@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{
    width:1000px;
    margin:auto;

}

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




article img {
    max-width:100%;

}

.article-image{

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

标签： htmlcss

解决方案

这里发生了一些问题，例如复制 ID。话虽如此，您可以通过调整宽度并使用vertical-align: top;

在这里摆弄：https ://jsfiddle.net/harcfs0u/40/

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

推荐阅读