Question

如我在下面的代码中所示，如何将informationbox内的所有div“推”到顶部：

我试图搜索这样的问题，但我找不到任何解决问题的方法

.informationbox {
  margin: 10px 0 20px 0;
  text-align: center;
}
.informationbox > div {
  margin: 0 15px;
  width: 100px;
}

.informationbox > div:first-of-type {
  margin-left: 0;
}

.informationbox > div:last-of-type {
  margin-right: 0;
}

.informationbox .infotitle, .infotext {
  text-align: left;
  margin: 0;
}

.informationbox .infotitle{
  font-size: 16px;
  font-weight: 600;
  margin-top: 5px;
}

<div class="informationbox">
  <div style="display: inline-block;">
    <img style="width: 100%; height: auto" src="https://c1.staticflickr.com/1/342/19541848580_7f925817c9_b.jpg" />
    <p class="infotitle">Something</p>
    <p class="infotext">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna </p>
  </div>
  <div style="display: inline-block;">
    <img style="width: 100%; height: auto" src="https://c1.staticflickr.com/1/342/19541848580_7f925817c9_b.jpg" />
    <p class="infotitle">Something</p>
    <p class="infotext">Wall of Text</p>
  </div>
  <div style="display: inline-block;">
    <img style="width: 100%; height: auto" src="https://c1.staticflickr.com/1/342/19541848580_7f925817c9_b.jpg" />
    <p class="infotitle">Something</p>
    <p class="infotext">Wall of Text</p>
  </div>
</div>

Answer 1

将vertical-align: top添加到此处：

.informationbox > div {
  ...
  vertical-align: top;
}

.informationbox {
  margin: 10px 0 20px 0;
  text-align: center;
}
.informationbox > div {
  margin: 0px 15px;
  width: 100px;
  vertical-align: top;
}

.informationbox > div:first-of-type {
  margin-left: 0px;
}

.informationbox > div:last-of-type {
  margin-right: 0px;
}

.informationbox .infotitle, .infotext {
  text-align: left;
  margin: 0;
}

.informationbox .infotitle{
  font-size: 16px;
  font-weight: 600;
  margin-top: 5px;
}

<div class="informationbox">
  <div style="display: inline-block;">
    <img style="width: 100%; height: auto" src="https://c1.staticflickr.com/1/342/19541848580_7f925817c9_b.jpg" />
    <p class="infotitle">Something</p>
    <p class="infotext">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna </p>
  </div>
  <div style="display: inline-block;">
    <img style="width: 100%; height: auto" src="https://c1.staticflickr.com/1/342/19541848580_7f925817c9_b.jpg" />
    <p class="infotitle">Something</p>
    <p class="infotext">Wall of Text</p>
  </div>
  <div style="display: inline-block;">
    <img style="width: 100%; height: auto" src="https://c1.staticflickr.com/1/342/19541848580_7f925817c9_b.jpg" />
    <p class="infotitle">Something</p>
    <p class="infotext">Wall of Text</p>
  </div>
</div>

Answer 2

在div

中添加内联样式vertical-align: top;

.informationbox {
    margin: 10px 0 20px 0;
    text-align: center;
}
.informationbox > div {
        margin: 0px 15px;
        width: 100px;
    }

    .informationbox > div:first-of-type {
        margin-left: 0px;
    }

    .informationbox > div:last-of-type {
        margin-right: 0px;
    }

    .informationbox .infotitle, .infotext {
        text-align: left;
        margin: 0;
    }

    .informationbox .infotitle{
        font-size: 16px;
        font-weight: 600;
        margin-top: 5px;
    }

<div class="informationbox">
        <div style="display: inline-block;">
            <img style="width: 100%; height: auto" src="https://c1.staticflickr.com/1/342/19541848580_7f925817c9_b.jpg" />
            <p class="infotitle">Something</p>
            <p class="infotext">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna </p>
        </div>
        <div style="display: inline-block;vertical-align: top;">
            <img style="width: 100%; height: auto" src="https://c1.staticflickr.com/1/342/19541848580_7f925817c9_b.jpg" />
            <p class="infotitle">Something</p>
            <p class="infotext">Wall of Text</p>
        </div>
        <div style="display: inline-block;vertical-align: top;">
            <img style="width: 100%; height: auto" src="https://c1.staticflickr.com/1/342/19541848580_7f925817c9_b.jpg" />
            <p class="infotitle">Something</p>
            <p class="infotext">Wall of Text</p>
        </div>
</div>

Answer 3

只是使用display: table或display: flex

对以前评论的扩展

.informationbox {
  margin: 0 auto;
  text-align: center;
  display: table;
}
.informationbox > div {
  margin: 0px 15px;
  padding: 10px;
  width: 100px;
  display: table-cell;
}

.informationbox2 {
  margin: 0 auto;
  text-align: center;
  display: flex;
}
.informationbox2 > div {
  padding: 10px;
  width: 100px;
}

<div class="informationbox">
        <div>
            <img style="width: 100%; height: auto" src="https://c1.staticflickr.com/1/342/19541848580_7f925817c9_b.jpg" />
            <p class="infotitle">Something</p>
            <p class="infotext">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna </p>
        </div>
        <div>
            <img style="width: 100%; height: auto" src="https://c1.staticflickr.com/1/342/19541848580_7f925817c9_b.jpg" />
            <p class="infotitle">Something</p>
            <p class="infotext">Wall of Text</p>
        </div>
        <div>
            <img style="width: 100%; height: auto" src="https://c1.staticflickr.com/1/342/19541848580_7f925817c9_b.jpg" />
            <p class="infotitle">Something</p>
            <p class="infotext">Wall of Text</p>
        </div>
</div>


<div class="informationbox2">
        <div>
            <img style="width: 100%; height: auto" src="https://c1.staticflickr.com/1/342/19541848580_7f925817c9_b.jpg" />
            <p class="infotitle">Something</p>
            <p class="infotext">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna </p>
        </div>
        <div>
            <img style="width: 100%; height: auto" src="https://c1.staticflickr.com/1/342/19541848580_7f925817c9_b.jpg" />
            <p class="infotitle">Something</p>
            <p class="infotext">Wall of Text</p>
        </div>
        <div>
            <img style="width: 100%; height: auto" src="https://c1.staticflickr.com/1/342/19541848580_7f925817c9_b.jpg" />
            <p class="infotitle">Something</p>
            <p class="infotext">Wall of Text</p>
        </div>
</div>

在父母的顶部浮动div

3 个答案: