фото в блоке

valera · May 27, 2013

здрасти. перейду сразу к вопросу. имеется див-блок с шириной 250px. в этот див-блок помещаем три фото с шириной и высотой 100px каждая. на примере получается, что только две фото помещаются в див-блок первой строки, а третья фото уходит на следующую строку. так вот вопрос: как поместить третью фото в див-блок первой строки не увеличивая при этом его ширину?

думал получится при помощи overflow:visible, но увы это не сработало

<html>
<head>
<title></title>
<style type="text/css">

.block{ width: 250px;   }
</style>
</head>
<body>

<div class="block">
<img src="#" width="100" height="100"/>
<img src="#" width="100" height="100"/>
<img src="#" width="100" height="100"/>
</div

hypnocolor · May 27, 2013


.block{
  width: 250px;
  overflow-x: scroll;
  white-space: nowrap;
}

red4pony · May 27, 2013

100+100+100=300 > 250 . Против математики не попрешь

Лучше задать ширину изображения как width:30%; а height:auto;

И по 5% на расстояния между 1 и 2, 2 и 3.

P.S. Не всегда срабатывает уведомление что кто-то написал сообщение пока ты пишешь.

Edited May 27, 2013 by red4pony

ShumNo · May 27, 2013

можно вместить все 3 картинки не на 100%, то есть визуально картинки станут меньше скажем 70 на 70, если они квадратные

valera · May 27, 2013


.block{
width: 250px;
overflow-x: scroll;
white-space: nowrap;
}

спасибо, это то что надо

Sign In

фото в блоке

Question

valera

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

hypnocolor

Link to comment

Share on other sites

red4pony

Link to comment

Share on other sites

ShumNo

Link to comment

Share on other sites

valera

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information