inline div не работает

Question

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

Итак, предположим, что 3 изображения, проходящие через экран слева направо, и под каждым изображением - это описание картины.

Как это сделать?

Answer 1

Im с Себом Nukem здесь. Я бы использовал отображение встроенного блока.

Answer 2

Поместите каждое изображение + заголовок в инлайн или плавучего блока:

CSS

div.image { 
    display:inline-block; /* or use float:left; */ 
} 
.caption { 
} 

HTML

<div class="image"><!-- one div per image --> 
    <img src="image.png"> 
    <div class="caption">Caption text here</div> 
</div> 
<div class="image"> 
    <img src="image2.png"> 
    <div class="caption">Caption text here</div> 
</div> 
... 

демо: http://jsfiddle.net/5s5s4otc/

Answer 3

Я хотел бы использовать элемент HTML <table> , Попробуйте что-то вроде этого:

table { 
 
    width: 100%; 
 
} 
 
td { 
 
    text-align: center; 
 
}

<table> 
 

 
    <tr> 
 
    <td> 
 
     <img src="http://placekitten.com/g/200/300" /> 
 
    </td> 
 
    <td> 
 
     <img src="http://placekitten.com/g/200/300" /> 
 
    </td> 
 
    <td> 
 
     <img src="http://placekitten.com/g/200/300" /> 
 
    </td> 
 

 
    </tr> 
 

 
    <tr> 
 
    <td>Description goes here.</td> 
 
    <td>Description goes here.</td> 
 
    <td>Description goes here.</td> 
 
    </tr> 
 

 
</table>

Я надеюсь, что это помогает! Оставьте комментарий ниже, если вам нужна дополнительная помощь.

Answer 4

DEMO:http://jsfiddle.net/pwee167/67oc6k7r/ \

Результат будет выглядеть примерно так:

HTML:

<div class="container"> 
    <img src="http://png-1.findicons.com/files/icons/85/kids/128/thumbnail.png"/> 
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
</div> 
<div class="container"> 
    <img src="http://png-1.findicons.com/files/icons/85/kids/128/thumbnail.png"/> 
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
</div> 
<div class="container"> 
    <img src="http://png-1.findicons.com/files/icons/85/kids/128/thumbnail.png"/> 
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
</div> 

CSS:

.container 
{ 
    float: left; 
    max-width: 128px; 
} 

---

Примечание: Я предположил, размеры ваших миниатюр будет таким же (как и в большинстве случаев использования миниатюр), что позволило мне установить максимальную ширину (с использованием max-width) из контейнер, содержащий изображение и описание. Это предотвратит переполнение текста и расширение контейнера.

Answer 5

Используйте поплавок или встроенный блок на контейнерах. См jFiddle здесь: http://jsfiddle.net/ckk2jprr/

HTML

<div> 
    <div class="pic"> 
     <img src="http://barkpost-assets.s3.amazonaws.com/wp-content/uploads/2013/11/grumpy-dog-11.jpg" /> 
     <div>This is some text</div> 
    </div> 
    <div class="pic"> 
     <img src="http://barkpost-assets.s3.amazonaws.com/wp-content/uploads/2013/11/grumpy-dog-11.jpg" /> 
     <div>This is some text</div> 
    </div> 
    <div class="pic"> 
     <img src="http://barkpost-assets.s3.amazonaws.com/wp-content/uploads/2013/11/grumpy-dog-11.jpg" /> 
     <div>This is some text</div> 
    </div> 
</div> 

CSS

.pic{ 
    float: left; 
} 

Answer 6

Одним из способов вы можете сделать это, прилагая каждое изображение и описание пары внутри сНу элемента, а затем просто плавающая эти дивы для левый.

DEMO: http://codepen.io/sajadtorkamani/pen/xbbrzE

HTML

<div class="gallery"> 
    <div> 
    <img src="http://placehold.it/300x200" /> 
    <p>Description goes here...</p> 
    </div> 
    <div> 
    <img src="http://placehold.it/300x200" /> 
    <p>Description goes here...</p> 
    </div> 
    <div> 
    <img src="http://placehold.it/300x200" /> 
    <p>Description goes here...</p> 
    </div> 
</div> 

CSS

.gallery div { 
    float: left; 
    margin-right: 1em; 
}