Как выстроить блоки div с разной шириной в один ряд

[galaydas]

Всем привет, такая вот у меня проблема:

<div class="block">
<img src="img.jpg" />
<h3>Заголовок</h3>
<span>Текст, примерно одно предложение</span>
</div>

Это будут товары в каталоге, блоков будет много, как можно выстроить их в ряд, типа float:left, но с тем условием, что ширина картинки может быть разная, и в зависимости от этого менялась бы ширина блока и текста в span, в итоге лишние блоки переносятся на нижнюю строку, а в строке их может быть, в одной 3, в другой 4, в зависимости от ширины картинки и соответственно блока.

При фиксированной ширине - это понятно, а вот так, не знаю куда копать

[Postscripter]

Может, сделать их не дивами а span-ами? Span вроде не переносится...

[13bis]

Используй float:left

<div style="float:left; width:100px;">TEXT</div>

<div style="float:left; width:150px;">TEXT</div>

<div style="float:left; width:200px">TEXT</div>

[Березовский]

Всем привет, такая вот у меня проблема:

<div class="block">
<img src="img.jpg" />
<h3>Заголовок</h3>
<span>Текст, примерно одно предложение</span>
</div>

Это будут товары в каталоге, блоков будет много, как можно выстроить их в ряд, типа float:left, но с тем условием, что ширина картинки может быть разная, и в зависимости от этого менялась бы ширина блока и текста в span, в итоге лишние блоки переносятся на нижнюю строку, а в строке их может быть, в одной 3, в другой 4, в зависимости от ширины картинки и соответственно блока.

При фиксированной ширине - это понятно, а вот так, не знаю куда копать

вообще не понял в чем проблема) решение по ходу легкое) но в чем проблема не понял.. уточните пожалуйста) тогда помогу)

[galaydas]

Дело в том, что я заранее не знаю какие будут картинки, и какая ширина у блоков, со span че то не выходит

[Березовский]

Дело в том, что я заранее не знаю какие будут картинки, и какая ширина у блоков, со span че то не выходит

уточните проблему.

[galaydas]

Попробую уточнить.

Должно быть так как обведено красным, если например одна картинка будет шириной 100рх а другая 200рх и мы не будем указывать ширину блока, то текст у нас растянется на всю ширину страницы, а надо так, чтобы текст под картинкой автоматически подгонялся по ширине картинки, может быть какими нибудь отрицательными отступами?

Вот код для скриншота

HTML

<div class="block_tovar">
<a href="#">
<div class="block_tovar_into"><img src="img/tov3.jpg" title="" /></div>
<h3>LG 32LS3510</h3>
</a>
<span>Диагональ — 32" (81,3 см); разрешение — 1366x768 Пикс; тип дисплея — LED; формат экрана — 16:9; частота развертки — 100 Гц (MCI).</span>
</div>

CSS

.block_tovar {
     margin:0 3% 30px 0;
	 display: inline-block;
	 max-width:200px;
	 vertical-align:top;
     height: auto;
}

.block_tovar_into {
      height:210px;
      display:block;
      position:relative;
      vertical-align:bottom;
      text-align:center;
}

.block_tovar_into img {
       border:none;
       margin-bottom:10px;
       display:block;
       position:absolute;
       bottom:0;
       max-width:200px;
       max-height:150px;
}

.block_tovar h3 {
       font-size:14px;
       font-weight:normal;
       margin-bottom:10px;
}

.block_tovar span { font-size:12px; }

Нужно что бы текст под картинкой растягивался на ширину картинки, но ширину картинки мы не знаем заранее, максимально 200рх, но если вдруг картинка будет 150рх, значит и текст должен быть 150, если делать при помощи span текст будет на все 200 всегда

Edited February 24, 2013 by galaydas

[timfcsm]

так?

<div class="block_tovar">
<div class="block_tovar_into">
<a href="#"><img src="[color=#008800][font=Helvetica Neue', Arial, Verdana, sans-serif]img/tov3.jpg[/font][/color][font=Helvetica Neue', Arial, Verdana, sans-serif]" title="" />[/font]

</a>

<h3>LG 32LS3510</h3>
<span>Диагональ — 32" (81,3 см); разрешение — 1366x768 Пикс; тип дисплея — LED; формат экрана — 16:9; частота развертки — 100 Гц (MCI).</span>
</div>
</div>



.block_tovar {
		 margin:0 3% 30px 0;
		 display: inline-block;
		 max-width:200px;
		 vertical-align:top;
		 height: auto;
}

.block_tovar_into {
		 height:210px;
		 vertical-align:bottom;
		 text-align:center;
}

.block_tovar_into img {
		 border:none;
		 margin-bottom:10px;
		 display:block;
		 max-width:200px;
		 max-height:150px;
}

.block_tovar h3 {
		 font-size:14px;
		 font-weight:normal;
		 margin-bottom:10px;
}

.block_tovar span { font-size:12px; max-width:100%;}

[galaydas]

У вас получается, текст под картинкой все равно расширяется шире узкой картинки, ну да ладно, я сделал фиксированный размер... немного не то, что хотел, ну да ладно, всем спасибо

[Yazon_Nile]

Вам же сказали, пофлотать, или инлаинблоками сделать.

[timfcsm]

del

Edited February 24, 2013 by timfcsm