Float ДИВ в верхней части родительского

Question

Как я могу «толчок» все дивы внутри informationbox к вершине, как я показываю в коде ниже:

Я пытался искать проблему, как это, но я не могу найти любой, что исправить мою проблему

.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

Добавить встроенный стиль vertical-align: top; в DIV

.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>