Как складывать изображение с текстом

Question

Кто-нибудь знает, как складывать изображение и текст под ним? Я уверен, что вы можете сделать это, как будто бы вы похожи на список, как вы создали навигацию. Похоже на: http://www.invisionapp.com/customers Я пытаюсь скопировать код, но мой текст продолжается, пока это не будет сделано. Я хочу, чтобы изображение и текст были в одной точке, а затем переместились на следующую точку. Благодарю.

HTML:

<div class="photolist"> 
    <ul> 
     <li><img src="C:\Users\Mitchel\Desktop\Dreamweaver\images\mymap.JPG" height="20%" width="20%"> 
     <blockquote>An F-22 Raptor and P-38 Lightning fly side-by-sideover Lake Michigan</blockquote></li> 
     <li><img src="C:\Users\Mitchel\Desktop\Dreamweaver\images\mymap.JPG" height="20%" width="20%"> 
     <blockquote>An F-22 Raptor and P-38 Lightning fly side-by-sideover Lake Michigan</blockquote></li> 
     <li><img src="C:\Users\Mitchel\Desktop\Dreamweaver\images\mymap.JPG" height="20%" width="20%"> 
     <blockquote>An F-22 Raptor and P-38 Lightning fly side-by-sideover Lake Michigan</blockquote></li> 
    </ul> 
</div> 

CSS:

.photolist{ 
    position:relative; 
    top:80px; 
    margin-left:10%; 
    background-color:none; 
} 
.photolist ul { 
    display: inline; 
} 
.photolist li{ 
    display: inline; 
    margin: 2px 10px; 
} 
blockquote{ 
    width:inherit; 
    display:inline; 
    text-align:left; 
} 

Answer 1

Установка изображения в display:block и позволяя быть это уровень блока по умолчанию более чем достаточно.

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.photolist { 
 
    margin-left: 10%; 
 
} 
 
.photolist ul { 
 
    display: inline-block; 
 
} 
 
.photolist li { 
 
    display: block; 
 
    margin: 2px 10px; 
 
} 
 
blockquote {}

<div class="photolist"> 
 
    <ul> 
 
    <li> 
 
     <img src="http://lorempixel.com/100/100/city/1" height="20%" width="20%" /> 
 
     <blockquote>An F-22 Raptor and P-38 Lightning fly side-by-sideover Lake Michigan</blockquote> 
 
    </li> 
 
    <li> 
 
     <img src="http://lorempixel.com/100/100/city/2" height="20%" width="20%" /> 
 
     <blockquote>An F-22 Raptor and P-38 Lightning fly side-by-sideover Lake Michigan</blockquote> 
 
    </li> 
 
    <li> 
 
     <img src="http://lorempixel.com/100/100/city/3" height="20%" width="20%" /> 
 
     <blockquote>An F-22 Raptor and P-38 Lightning fly side-by-sideover Lake Michigan</blockquote> 
 
    </li> 
 
    </ul> 
 
</div>

Я не уверен, что действительно семантический здесь.

Элемент blockquote представляет собой раздел, который цитируется из другого источника.

Содержимое внутри блока должно быть указано из другого источника, адрес которого, если он есть, может быть указан в атрибуте cite.

Я мог бы рассмотреть вопрос об использовании figure/figcaption внутри li ... чувствует себя более правильно для меня.

Элемент фигуры представляет собой некоторое содержимое потока, необязательно с надписью, которое является автономным и обычно упоминается как единое целое из основного потока документа.

Элемент фигуры может использоваться для аннотирования иллюстраций, диаграмм, фотографий, кодовых списков и т. Д., Которые указаны в основном содержании документа, но которые могут, не затрагивая поток документа, быть удалены от этого основного контента - например, от страницы, к выделенным страницам или к приложению.