У меня есть элемент-держатель, который обернут вокруг пары других элементов-элементов, поэтому у держателя нет установленной ширины. Также внутри держателя находится еще один элемент div, содержащий текст. Когда текста слишком много, держатель расширяется, поэтому он больше не сжимается. Вот демо моей проблемы: http://jsfiddle.net/WSbAt/. Это для страницы фотогалереи.
Я думаю, что нельзя обойтись без установки ширины держателя, чего я не могу сделать, поскольку количество изображений в строке является динамическим. Вероятно, я могу разобраться с этим с помощью jQuery, но надеялся, что есть решение css.
Изменить: я стараюсь не указывать ширину, поскольку количество миниатюр в строке зависит от размера вашего окна.
Демо: http://jsfiddle.net/WSbAt/
CSS:
#container
{
width:600px; /*only set for demo. will be random on live page*/
border:1px solid black;
text-align:center;
}
#holder
{
display: inline-block;
border:2px solid blue;
}
.thumbnail
{
float:left;
width:100px;
height:100px;
background-color:red;
margin-right:10px;
margin-bottom:10px;
}
.expandedHolder
{
padding:10px;
border:2px solid yellow;
margin-bottom:10px;
margin-right:10px;
}
.fullImage
{
float:left;
width:250px;/*only set for demo. will be random on live page*/
height:200px;
background-color:green;
}
.text
{
float:left;
margin-left:10px;
}
HTML:
some text here. some text here. some text here.
