Question

我很难弄清楚如何让3张图像出现在同一个高度级别。我之前尝试在段落中使用vertical-align: bottom;和margin-bottom，但没有效果。

小提琴：https://jsfiddle.net/3ueoxc4k/2/embedded/result/

HTML：

<section class="info">
  <div class="container">
    <div class="info__title">
      <h2> Some main title </h2>
    </div>
    <div class="info__widgets">
      <div class="widget">
        <span class="widget__title"> TITLE1 </span>
        <p>
          NORMAL TEXT ABOUT SOMETHING HEHEHE.
        </p>
          <img src="http://avatarmaker.net/free-avatars/avatars/games_225/super_mario_259/super_mario_panic_avatar_100x100_25831.gif"/>
      </div>
      <div class="widget">
        <span class="widget__title"> TITLE 2 </span>
        <p>
          BIGGER TEXT BUT STILL NORMAL BLA BLA HEHE LOREM IPSUM
        </p>
        <img src="http://avatarmaker.net/free-avatars/avatars/games_225/super_mario_259/super_mario_panic_avatar_100x100_25831.gif"/>
      </div>
      <div class="widget">
        <span class="widget__title"> TITLE 3 </span>
        <p>
          SOME BIG TEXT SOME BIG TEXT SOME BIG TEXT SOME BIG TEXT SOME BIG TEXT SOME BIG TEXT SOME BIG TEXT SOME BIG TEXT SOME BIG TEXT SOME BIG TEXT SOME BIG TEXT SOME BIG TEXT 
        </p>
        <img src="http://avatarmaker.net/free-avatars/avatars/games_225/super_mario_259/super_mario_panic_avatar_100x100_25831.gif"/>
      </div>
    </div>
  </div>
</section>

CSS：

.info {
  position: relative;
  background: #fafafa;
}
.info__title {
  text-align: center;
  padding-top: 2.25rem;
  padding-bottom: 2.25rem;
}
.info__title h2 {
  font-family: Oswald, Helvetica, sans-serif;
  font-size: 1.5rem;
  color: #999;
  font-weight: 300;
}
.info__widgets {
  margin-top: 2.25rem;
  width: 100%;
  text-align: center;
}
.widget {
  vertical-align: top;
  display: inline-block;
  width: 50%;
  margin-bottom: 2.25rem;
}
@media only screen and (min-width: 620px) {
  .widget {
    width: 30%;
    display: inline-block;
  }
}
@media only screen and (min-width: 1360px) {
  .widget {
    width: 15%;
    display: inline-block;
  }
}
.widget * {
  display: block;
  width: 100%;
  text-align: center;
}
.widget i:before {
  font-size: 1.875rem;
  color: #ccc;
}
.widget .i-alcohol-shop {
  -webkit-transform: scale(1.35);
  -moz-transform: scale(1.35);
  -ms-transform: scale(1.35);
  -o-transform: scale(1.35);
  transform: scale(1.35);
}
.widget__number {
  margin-top: 1.5rem;
  font-family: Oswald, Helvetica, sans-serif;
  font-size: 2.125rem;
  color: #E97228;
  font-weight: 400;
  display: block;
}
.widget__title {
  margin-top: 1rem;
  margin-bottom: 2rem;
  font-family: Oswald, Helvetica, sans-serif;
  font-size: 1.25rem;
}

Answer 1

尝试将此css放在所有图像上：

height: 50px;
margin-top: 100px;

这有点粗糙的解决方案，但如果你玩这些价值观，我认为你能够得到你想要的东西。

使三列内的3幅图像出现在同一高度级别

1 个答案: