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

我认为这就是你所追求的。在我的jsFiddle工作。我会调查bootstrap，因为它是为你想做的事情而制作的，只是一个建议。

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

Answer 2

添加此CSS

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

.img2{marign:0 4%;}

Answer 3

我不确定这会有效，但我认为它会：

.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

使用CSS

3 个答案: