html - 在 CSS 中显示带有文本的内联图像

Question

我已经为这个问题苦苦挣扎了几天(不习惯编写 CSS)。我想内联显示我的图像并在它们下面添加描述，如下所示: Link to image.

我一直在尝试这样做，使用这段代码。这是 HTML:

<div class="work">
        <h6>What is xx<strong>xxx</strong> ?</h6>


        <div id="images">
            <div class="img1">
                <img src="1.png" alt="fb" />
                <h5>Title1</h5>
                <div class="text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget congue lorem. Curabitur finibus ut metus quis accumsan. Nulla feugiat, mauris convallis lobortis imperdiet, </p></div>
            </div>

            <div class="img2">
                <img src="2.png" alt="fb" />
                <h5>Title2</h5>
                <div class="text2"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget congue lorem. Curabitur finibus ut metus quis accumsan. Nulla feugiat, mauris convallis lobortis imperdiet,</p></div>
            </div>

            <div class="img3">
                <img src="3.png" alt="fb" />
                <h5>Title3</h5>
                <div class="text3"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget congue lorem. Curabitur finibus ut metus quis accumsan. Nulla feugiat, mauris convallis lobortis imperdiet, </p></div>
            </div>
        </div>
    </div>

并使用 SASS 以这种方式设置样式:

 .work 
  {
    margin-bottom: 40px;
    width: 100%;
    text-align: center;
    overflow: hidden;
    display: inline-block;
    h5 {
      font-family: $font;
      color: $text;
      font-size: 1.4em;
    }
    p {
      font-family: $font;
      color: $text;
      font-size: 1em;
      margin-left: auto;
      margin-right: auto;
      width: 80%;
      text-align: center;
    }
    #images {
      display: inline-block;;
      width: 100%;
    }
    img {
      display: inline-block;
    }
      h1 {
        font-size: 1em;
        color: $main-bg;
        text-align: center;
        padding: 0 10px;
        margin-top: 60px;
      } 
      .img1 {
          width: 33%;
          img {
            width: 240px;
          }
      }
      .img2 {
        width: 33%;
        img {
          width: 240px;
        }
      }
      .img3 { 
        width: 33%;
        img {
          width: 240px;
        }
      }
      h6 {
        text-align: center;
        font-size: 1.6em;
        text-transform: uppercase;
        font-weight: 600;
        margin-top: 60px;
        color: $text;
        font-family: $font;
      }
  }

很明显我的代码不工作，我希望你们能帮我找出问题所在，并帮助我修复它。提前抱歉，如果有其他帖子解决了类似的问题，我已经找了几天但找不到任何一个。

Answer 1

我不确定这是否可行，但我认为它会:

.work 
  {
    margin-bottom: 40px;
    width: 100%;
    text-align: center;
    overflow: hidden;
    display: inline-block;
    h5 {
      font-family: $font;
      color: $text;
      font-size: 1.4em;
    }
    p {
      font-family: $font;
      color: $text;
      font-size: 1em;
      margin-left: auto;
      margin-right: auto;
      width: 80%;
      text-align: center;
    }
    #images {
      display: inline-block;;
      width: 100%;
    }
    img {
      display: inline-block;
    }
      h1 {
        font-size: 1em;
        color: $main-bg;
        text-align: center;
        padding: 0 10px;
        margin-top: 60px;
      } 
      .img1 {
          width: 33%;
          img {
            width: 240px;
          }
      }
      .img2 {
        width: 33%;
        img {
          width: 240px;
        }
      }
      .img3 { 
        width: 33%;
        img {
          width: 240px;
        }
      }
      h6 {
        text-align: center;
        font-size: 1.6em;
        text-transform: uppercase;
        font-weight: 600;
        margin-top: 60px;
        color: $text;
        font-family: $font;
      }
  }
#images {
  display:block;
  width: 100%;
  text-align:center;
}
    .img1, .img2, .img3 {
     display: inline-block;
     width: 33%;
     vertical-align: top;
}

DEMO