요소가 창 크기 조정에 의해 푸시 다운되는 것을 방지하려면 어떻게해야합니까?

Question

내 목표는 "hello"스팬이 창 크기 조정에 의해 아래로 밀리는 것을 방지하는 것입니다.

http://jsfiddle.net/5MjNL/5/

HTML

<div id='main'> 
    <div class='container'> 
     <input type='text' class='input-field'></input> 
     <span class='foo'>hello</span> 
    </div> 
</div> 

CSS

#main 
{ 
    border:1px solid red; 
    width: 100%; 
    height: 300px; 
} 
.input-field 
{ 
    border: 1px solid blue; 
    width:70%; 
} 

jsfiddle에서, 당신은 수평 크기를 줄일 어떤 시점에서 브라우저 창을 드래그하면 SPAN "hello"텍스트가 포함 된 텍스트가 푸시 다운됩니다.

텍스트 필드 폭만 축소되도록 내 스타일을 어떻게 설정합니까?

Answer 1

시도`.container에 white-space: nowrap를 추가 :

.container { 
    white-space: nowrap; 
} 

또는 인 flexbox를 사용해보십시오 (이것은 과거와 구문을 포함) :

.container { 
    display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */ 
    display: -moz-box;   /* OLD - Firefox 19- (buggy but mostly works) */ 
    display: -ms-flexbox;  /* TWEENER - IE 10 */ 
    display: -webkit-flex;  /* NEW - Chrome */ 
    display: flex; 
} 

Answer 2

또 다른 옵션은 min-을 지정을 할 수 있습니다 너비를 정의하고 자동으로 오버플로를 정의하려는 너비 너비는

입니다. 이렇게하면 div가 유동적이어서 확장되지만 페이지 구조의 별 모양이 축소됩니다 TS는 엉망지고, 당신은 정말이 동작은 당신이 비율을 고려할 수 있습니다하고자하는 경우, 사용자는

http://jsfiddle.net/5MjNL/6/

#main 
{ 
    border:1px solid red; 
    width: 100%; 
    min-width:300px; 
    height: 300px; 
    overflow: auto; 

} 

.input-field 
{ 
    border: 1px solid blue; 
    width:70%; 
} 
.foo{ 

} 
} 

Answer 3

을 스크롤 할 수 있습니다.

#main{ 
    width:/*percentage of choice here*/; 
} 
.contianer{ 
    width:/*percentage of choice here*/; 
} 
.input-field{ 
    width:/*percentage of choice here*/; 
} 
.foo{ 
    width:/*not a percentage width here*/; 
}