thích quấn bên trong tiểu div trước khi gói toàn bộ div

Question

Tôi có hai của div được thả nổi sang trái bên trong một wrapper-div như thế này:

HTML:

<div id="container"> 
    <div id="logo">LOGO</div> 
    <div id="nav">Link1 Link2 Link3 Link4</div> 
</div>​ 

CSS:

#container { } 
#logo { float: left; margin-right: 10px; } 
#nav { float: left; } 

JSFiddle: http://jsfiddle.net/vZWTc/277/

Điều gì xảy ra khi giảm chiều rộng của cửa sổ là thứ ở #nav đầu tiên nhảy xuống dưới #logo và sau đó nó bắt đầu gói bên trong. Có cách nào (sử dụng layout thay vì javascript) đầu tiên làm cho nó bọc bên trong #nav xuống đến một ngưỡng (nói 150px chiều rộng) và sau đó khi giới hạn đó đạt được cho phép nó nhảy xuống dưới #logo?

Answer 1

Giải pháp duy nhất tôi đã đưa ra là có thanh kích thước cố định bên trái (div biểu trưng bên trái). Nếu nó cố định, khung bên phải có thể có một lề trái để nhường chỗ cho nó và chiếm phần còn lại của không gian, và với nó quấn văn bản nếu cần thiết. Điểm hạn chế của việc này là nó sẽ không nhảy xuống bên dưới div nổi bên trái nếu cửa sổ co lại quá nhiều vì nav hoặc navcontent css không nổi.

Ví dụ có sẵn tại http://jsfiddle.net/vZWTc/278/ với một số văn bản bổ sung cho chương trình nhưng có sẵn trong ngắn tại đây.

<div id="container"> 
    <div id="logo">LOGO</div> 
    <div id="nav"> 
     <div id="navcontent"> 
      <p>Link1 Link2 Link3 Link4</p> 
     </div> 
    </div> 
</div>​ 

#logo { 
    float: left; 
    margin-right: 10px; 
} 
#nav { 
    display: block; 
} 
#navcontent { 
    margin-left: 100px; 
}