Картинки с подписью

@abc_privet · Регистрация: 17.03.2012

Author24 — интернет-сервис помощи студентам

Нужно выдать серию 30-и картинок.
Если просто вадать через <img > то все замечательно.

Но нужна подпись под каждой картинкой.
Нашел пример:

HTML5

Example
 
<html>
<head>
<style type="text/css">
div.img
  {
  margin:2px;
  border:1px solid #0000ff;
  height:auto;
  width:auto;
  float:left;
  text-align:center;
  }
div.img img
  {
  display:inline;
  margin:3px;
  border:1px solid #ffffff;
  }
div.img a:hover img
  {
  border:1px solid #0000ff;
  }
div.desc
  {
  text-align:center;
  font-weight:normal;
  width:120px;
  margin:2px;
  }
</style>
</head>
<body>
 
<div class="img">
  <a target="_blank" href="klematis_big.htm">
  <img src="klematis_small.jpg" alt="Klematis" width="110" height="90" />
  </a>
  <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
  <a target="_blank" href="klematis2_big.htm">
  <img src="klematis2_small.jpg" alt="Klematis" width="110" height="90" />
  </a>
  <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
  <a target="_blank" href="klematis3_big.htm">
  <img src="klematis3_small.jpg" alt="Klematis" width="110" height="90" />
  </a>
  <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
  <a target="_blank" href="klematis4_big.htm">
  <img src="klematis4_small.jpg" alt="Klematis" width="110" height="90" />
  </a>
  <div class="desc">Add a description of the image here</div>
</div>
 
</body>
</html>

Но если кортинки разного размера, то располагаются на странийе не так ровненько как просто <img >, а полный бардак. Как подправить пример чтобы блок картинка с текстом был одного размера и текст на странице (не тот что под картинками) не сбивался куда то вправо?

@nightkon · 08.06.2012, 09:28

CSS

div.desc {
    text-align:center;
    font-weight:normal;
    width:120px;
    margin:2px auto;
}

@marina2 · 02.09.2012, 00:45

Размещала картинки по такому же принципу. Только не получается разместить надпись в одну строчку.
text-align:justify; не помогает.

Помог только тег <NOBR>. А есть ли альтернативный способ сделать надпись по ширине?

@marina2 · 02.09.2012, 02:07

Поняла в чем проблема.

CSS

1	width:120px;

- Тут устанавливается ширина текста. Я убрала эту строчку и все красиво получилось

@marina2 Рожденная для битвы 293 / 71 / 14 Регистрация: 08.11.2009 Сообщений: 1,260
	02.09.2012, 00:45	3
	Размещала картинки по такому же принципу. Только не получается разместить надпись в одну строчку. text-align:justify; не помогает. Помог только тег <NOBR>. А есть ли альтернативный способ сделать надпись по ширине? 0

	02.09.2012, 02:07