div 행을 감싸는 일이 없도록

Question

float:right div 집합을 생성하고 그 중 어느 것이 얼마나 넓 았는지에 관계없이 줄 바꿈하지 않는 방법. 함께 표시 영역보다 넓 으면 x 스크롤이 나타납니다.

해당 div의 콘텐츠는 정상적으로 줄 바꿈되어야합니다.

CSS 만 좋을 것입니다.

Answer 1

white-space: nowrap;으로 부모 요소의 스타일을 지정합니다. 그러나 이는 display: inline (또는 display: inline-block;) 요소에서만 작동합니다.

<div id="parent"> 
    <div class="child"></div> 
    <!-- there's quite a lot of these... --> 
    <div class="child"></div> 
</div> 

그리고 CSS :

#parent { 
    white-space: nowrap; 
} 

#parent .child { 
    display: inline-block; 
    /* there's some other CSS for aesthetics */ 
} 

JS Fiddle demo 다음 HTML을 감안할 때.

불행히도 은입니다. float -ed 요소는 새로운 행으로 줄 바꿈하지 않아야합니다.

보존 또는 오히려, 힘을 하위 요소에 대한 법선 - 포장을 명시 적으로 상속을 통해-타고해야하고 white-space: normal를 설정하려면 (아마도 정의뿐만 아니라 width 또는 max-width)

/* other CSS remains intact */ 

#parent .child { 
    display: inline-block; 
    /* irrelevant/aesthetic CSS */ 
    white-space: normal; 
    max-width: 8em; 
} 

JS Fiddle demo.

Answer 2

몇몇 요소 : http://jsfiddle.net/thirtydot/A8duy/

많은 요소 : http://jsfiddle.net/thirtydot/A8duy/1/

HTML :이

<div class="block-container"> 
    <div>1</div> 
    <div>2</div> 
    <div>3</div> 
    <div>4</div> 
    <div>5</div> 
</div>​ 

CSS : 이상

.block-container { 
    text-align: right; 
    white-space: nowrap; 
    float: left; 
    width: 100%; 
    margin-bottom: 1em; 
    border: 1px solid red; 
    -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
      box-sizing: border-box; 
} 
.block-container > div { 
    width: 50px; 
    height: 50px; 
    vertical-align: top; 
    display: inline-block; 
    *display: inline; 
    zoom: 1; 
    text-align: left; 
    white-space: normal; 
    border: 1px solid blue; 
}