내용에 따라 너비가 다른 2 div 인라인을 만드는 방법

Question

2 개의 부분으로 나누어 진 막대, 하나에는 텍스트가 들어 있고, 두 번째는 빵 부스러기의 일부입니다. 두 요소 모두 인라인이어야합니다.

비결은 바로 하나는 왼쪽 하나에 왼쪽 조정해야합니다 동안 왼쪽 사업부는 유연한 콘텐츠를해야한다는 것입니다 :

화면이, 예를 들어 700 픽셀 너비, 아래로 schrinked 왼쪽됩니다

---------------------------------------------------------------------------------- 
|long text long text long text long text| <...breadcrumb navigation...>   | 
---------------------------------------------------------------------------------- 

div는 막대의 30 %를 말해 보겠습니다. 텍스트가 긴하는 것입니다 경우, 오버 플로우와 손질을하셔야합니다 : 숨겨진 : 텍스트가 비록 짧은 경우

------------------------------------------------------- 
|long text long text...| <...breadcrumb navigation...>| 
------------------------------------------------------- 

, 그것은 다음과 같아야합니다

---------------------------------------------------------------------------------- 
|short text| <...breadcrumb navigation...>          | 
---------------------------------------------------------------------------------- 

그리고 화면에

30 %의 폭 원의 크기를 조정 '

------------------------------------------------------- 
|short text| <...breadcrumb navigation...>   | 
------------------------------------------------------- 

내가 display:table-cell 등 여러 가지 방법을 시도했지만, 결과는했다 : t이 필요할 수

---------------------------------------------------------------------------------- 
|short text        | <...breadcrumb navigation...>   | 
---------------------------------------------------------------------------------- 

거의 마지막으로 작동 한 것은 float: left이지만이 경우 오버플로 : 숨김이 작동하지 않고 텍스트가 전체 레이아웃 창틀 화면을 밀거나 다음 줄로 점프 중입니다.

사람이이 양호하게는 JS하지 않고, 가장 쉬운 가능한 방법으로 정리 될 수 있는지 어떤 생각을 가지고? 감사합니다

Answer 1

은, 왼쪽 DIV 왼쪽으로 플로트 최대 폭을 설정하고 NOWRAP하는 공백의 설정

.

.left, .right { overflow:hidden; white-space:nowrap; } 
 
.left { max-width:30%; float:left; background:green; } 
 
.right { background:red; }

<div class="left">asdf asdfasdf asdfasdf asdfasdf asdfasdf asdfsadfa asdfasdf asdfasdfasdfasdfasdf asdfasdfasdfasdfasdfas as</div> 
 
<div class="right">asdfasfasdfasdfsafdsadf</div>