Высота бокса div

Question

Другой вопрос CSS.

У меня есть поля div в пределах <li> тегов в теге <ul>. Каждый тег div содержит изображение с текстом под изображением. Изображения имеют одинаковый размер, однако длина текста не то же самое - поэтому поля div не одинакового размера. Я хочу, чтобы вершина изображений выравнивалась, но сейчас они больше похожи на лестницы. Я попытался изменить высоту divs, но это расширяет поле вниз, а не вверх. Вот соответствующий код, который у меня есть до сих пор.

<ul> 
     <li class="line2"><div style="width:284px;border:3px;border-style:solid;"><img class="border" src="/images/icons/1.png" width="284" height="164" alt=""/><p>Paragraph.</p></div></li> 
     <li class="line2"><div style="width:284px;border:3px;border-style:solid;"><img class="border" src="/images/icons/2.png" width="284" height="164" alt=""/><p>Longer Paragraph</p></div></li> 
     <li class="line2"><div style="width:284px;border:3px;border-style:solid;"><img class="border" src="/images/icons/3.png" width="284" height="164" alt=""/><p>Longest Paragraph</p></div></li> 
     </ul> 

(Граница только так я могу видеть то, что я работаю с)

Я понимаю, что я мог бы отделить изображение и текст в различные див, но у меня есть так много различных див уже, я чувствую, что я немного чересчур. Если это лучший способ сделать это, я, однако, хочу знать наверняка.

Если бы кто-нибудь мог помочь в этом, я бы очень признателен. Благодарю.

Answer 1

A <div> тег в основном добавляет логическое разделение с разрывом строки. И поэтому он показан как лестница. Поэтому я предлагаю вам вместо этого использовать тег <span>, с помощью которого вы можете выровнять свои поля горизонтально; Надеюсь, это поможет

Answer 2

Я пробовал все, кроме самой очевидной вещи; Я добавил <br/> теги под текстом для тех, которые были ниже самого высокого. Я знаю, что, вероятно, есть лучший способ сделать это, но для меня все самое удобное.