Как сгруппировать вещи (изображение поверх текста + изображение поверх текста) в теге div?

Question

Я пытаюсь сделать что-то, что кажется довольно простым.

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

есть мысли?

вот код ...

    <div style"display:inline">
        <img src="img/test.jpg" />
        Features
        <a href="http://www.youtube.com/watch?v=wO4HJOf_DGU" rel="lightbox"><img alt="Watch a Video" src="img/test.jpg" /></a>
        Watch a Video
        <img src="img/test.jpg" /><br/>
        Excetera
    </div>

Answer 1

Оберните изображения в div. Поместите текст в промежуток в том же самом div; и поместите его под изображение, давая ему style="clear:both"

Вы можете сделать div float и поместить его в больший div, если вы не хотите устанавливать их ширину вручную.

Например: <div> <div style="width:100px; height:100px; border: 1px solid red; diaply:inline;"></div> <span style="clear:both">Textg</span> </div>

Где встроенный div действует как изображение.

Текст появляется под изображением