Расположение целых элементов рядом

Question

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

Я сделал этот пример того, что происходит .

Вот скриншот по ссылке выше.

csspos http://img709.imageshack.us/img709/6799/csswo.png

А вот и ожидаемый результат

cssposright http://img826.imageshack.us/img826/8530/csse.png

Answer 1

Как насчет http://jsfiddle.net/qB225/15/? Это добавляет

.item {
    ...
    white-space: nowrap;
}

Answer 2

Поместите неразрывный пробел между ссылками и интервалами.

http://jsfiddle.net/qB225/22/

Answer 3

Попробуйте использовать «встроенный блок» следующим образом:

.item
{
  display: inline-block;
  font-size: 11px;
  padding: 2px 2px 2px 0;
}

Спасибо.

Answer 4

Если вы хотите, чтобы они были только парами, вам нужно сделать две вещи. Сначала измените html, чтобы сгруппировать элементы div в две пары:

<div class="master">
    <div>
        <div class="item">
            <a href="javascript:;">Text</a>
            <span>(10)</span>
        </div>
        <div class="item">
            <a href="javascript:;">Text</a>
            <span>(10)</span>
        </div>
    </div>
    <div>
        <div class="item">
            <a href="javascript:;">Text</a>
            <span>(10)</span>
        </div>
        <div class="item">
            <a href="javascript:;">Text</a>
            <span>(10)</span>
        </div>
    </div>
</div>

А затем добавьте число с плавающей точкой к группам div:

.master > div{ float:left; }

Answer 5

http://jsfiddle.net/qB225/21/

.master
{
    width: 160px;
}

.item
{
    display:inline-block;
    font-size: 11px;
    padding: 2px 2px 2px 0;
}

.item { display:inline; } /* DO NOT REMOVE, FOR IE */

.item a
{
    text-transform: uppercase;
}
​