it-swarm.com.ru

CSS неупаковывающие плавающие div

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

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

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 и т.д.), Но все они провалились.

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

54
o0'.

Используйте 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/

105
DanielB

inline не будет работать, table-cell должен работать - посмотрите это jsFiddle, которое я сделал в ответ на похожий вопрос:

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

не будет работать в <= ie7, хотя ...

5
ptriek

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


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

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

3
Mathletics

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

Редактировать 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;
}
0
ScottS