Question

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>
      </div>
      <div class="widget">
        <span class="widget__title"> TITLE 2 </span>
        <p>
          BIGGER TEXT BUT STILL NORMAL BLA BLA HEHE LOREM IPSUM
        </p>
      </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>
      </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 {
  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;
}

https://jsfiddle.net/3ueoxc4k/1/embedded/result/

我不确切地知道为什么这个楼梯和楼梯有什么关系。效果，我希望能够将三个保持在同一水平，但我不知道为什么楼梯效应正在发生。

非常欢迎任何帮助。

Answer 1

添加

vertical-align: top;

To .widget {}

Answer 2

只需更改

即可

.widget {
    width: 15%;
    float: left;
  }

您正在使用display：inline-block;根据div的内容创建一个块。

同一级别的3列

2 个答案: