CSS 비 래핑 플로팅 div

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;
}

몇 가지 (인라인, 테이블 셀 등)를 시도했지만 모두 실패했습니다.

할 수 있습니까? 그렇다면 어떻게?

---

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/

---

인라인이 작동하지 않고 테이블 셀이 작동해야합니다. 유사한 질문에 대한 답변으로 만든이 jsFiddle을 참조하십시오.

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

그래도 <= ie7에서는 작동하지 않습니다 ...

---

죄송합니다. 질문을 잘못 읽었습니다. 이전 답변이 제거되었습니다.

---

컨테이너에 white-space: nowrap다음 요소에display: inline-block

Fiddle here: http://jsfiddle.net/HZzrk/1/

---

Edited: Combined DanielB's and my original answer. You need to put min-width instead of width for both sub and ranking and have the elements set to inline-block with container having white-space: nowrap. See: http://jsfiddle.net/5wRXw/3/

Edit 2: For your purposes, it might be better to eliminate the overflow properties all together on the ranking element. See 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;
}

ReferenceURL : https://stackoverflow.com/questions/8447553/css-non-wrapping-floating-divs