УСБ без обтекания плавающих дивов


Мне нужно создать одну строку, содержащую переменный объем (плавающая?) divs: размер контейнера фиксирован, и он должен добавить горизонтальную полосу прокрутки, когда это необходимо, никогда не оборачивая.

я попробовал следующее, но это не работает: он обертывает вместо этого.

div#sub {
    background-image:url("../gfx/CorniceSotto.png");
    width:760px;
    height:190px;
}
div#sub > div#ranking {
    position:relative;
    top:42px;
    left:7px;
    width:722px;
    height:125px;
    overflow-x:auto;
    overflow-y:hidden;
}
div#sub > div#ranking > div.player {
    float:left;
    width:67px;
    height:120px;
    margin-left:5px;
    background-color:#f3e1bb;
}

Я пробовал несколько вещей (inline,table-cell и т. д.), но все они потерпели неудачу.

можно ли это сделать? Если да, то как?

4   51   2011-12-09 19:14:07

4 ответа:

использовать display: inline-block вместо floatи предоставить контейнер white-space: nowrap.

div#sub > div#ranking {
    position:relative;
    top:42px;
    left:7px;
    width:722px;
    height:125px;
    overflow-x:auto;
    overflow-y:hidden;
    white-space: nowrap;
}
div#sub > div#ranking > div.player {
    display: inline-block;
    width:67px;
    height:120px;
    margin-left:5px;
    background-color:#f3e1bb;
}

вот пример:http://jsfiddle.net/D5hUu/3/

inline не будет работать, таблица-ячейка должна работать-см. Этот jsFiddle, который я сделал в ответ на аналогичный вопрос:

http://jsfiddle.net/DxZbV/1/

не будет работать в

упс, я неправильно понял вопрос. Предыдущий ответ удален.


на ваш контейнер, white-space: nowrap а потом на элементах display: inline-block

скрипка здесь:http://jsfiddle.net/HZzrk/1/

редактировать: комбинированный DanielB и мой оригинальный ответ. Вам нужно поставить min-width вместо width для sub и ranking и составляющие на inline-block С баллона, имеющего white-space: nowrap. Смотрите:http://jsfiddle.net/5wRXw/3/

Edit 2: для ваших целей, это может быть лучше, чтобы устранить overflow свойства все вместе на ranking элемент. Видеть http://jsfiddle.net/5wRXw/4/

#sub {
    backgrond-color: yellow;
    min-width:760px;
    height:190px;
}
#ranking {
    position:relative;
    top:42px;
    left:7px;
    min-width:722px;
    height:125px;
    overflow-x:auto; /* you may be able to eliminate this see fiddle above */
    overflow-y:hidden; /* and eliminate this */
    white-space: nowrap; /* like DanielB */
}
#ranking > .player {
    display: inline-block; /* like DanielB */
    width:67px;
    height:120px;
    margin-left:5px;
    background-color:#f3e1bb;
}