在 CSS 中显示带有文本的内联图像答案

【问题标题】：Display inline images with text in CSS在 CSS 中显示带有文本的内联图像
【发布时间】：2015-09-22 22:36:32
【问题描述】：

我已经为这个问题苦苦挣扎了几天天了（不太习惯编写 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;
      }
  }

显然我的代码不起作用，我希望你们能帮助我找出问题所在，并帮助我修复它。提前抱歉，如果有其他帖子解决了类似的问题，我已经找了几天了，没有找到。

【问题讨论】：

标签： html image css frontend

【解决方案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

【讨论】：

【解决方案2】：

我想这就是你所追求的。在我的 jsFiddle 工作。我会研究引导程序，因为它是为您尝试做的事情而设计的，不过只是一个建议。

img1, img2, img3 {
  display: inline-block;
  width: 33%;
}

【讨论】：

【解决方案3】：

添加此 CSS

#images {
  display:block;
  width: 100%;
  text-align:center;
}
    .img1, .img2, .img3 {
     display: inline-block;
     width: 31%;
     vertical-align: top;
}

.img2{marign:0 4%;}

【讨论】：