CSS: Hai trường, để lại một chiều rộng linh hoạt, phải có một không gian còn lại

Question

------------- -------------------------------------------------- 
| some text | | some more text, sometimes more, sometimes less | 
------------- -------------------------------------------------- 

|<------------------------- 100% width ----------------------->| 

Vì vậy, tôi có bố cục ở trên. Hộp bên trái phải luôn nhỏ nhất có thể, trong khi hộp bên phải sẽ chiếm không gian còn lại. Điều đó thường sẽ ổn với float: left.

Vấn đề là hộp bên phải có thể phát triển khá nhiều, trong khi một trái được khá nhiều đảm bảo là rất nhỏ (chưa thay đổi theo kích thước, vì vậy cần phải được linh hoạt). Nếu hộp đúng phát triển, tôi cần nó để hành xử như thế này:

------------- -------------------------------------------------- 
| some text | | quite a lot of text, actually, really quite a | 
------------- | bunch of it, you could say this is really  | 
       | quite a heck of a lot of text     | 
       -------------------------------------------------- 

Nếu tôi sử dụng một float:left, hộp bên phải sẽ xếp hàng-break dưới hộp bên trái nếu nó có chứa rất nhiều văn bản:

------------- 
| some text |           (not good) 
------------- 
---------------------------------------------------------------- 
| quite a lot of text, actually, really quite a bunch of it, | 
| you could say this is really quite a heck of a lot of text | 
---------------------------------------------------------------- 

Nếu tôi sử dụng một bảng cho cả thay vào đó, các hộp bên trái có thể phát triển không cần thiết nếu cả hai đều chứa rất ít văn bản:

             (not good) 
-------------------------------- ------------------------------- 
| some text     | | not that much text   | 
-------------------------------- ------------------------------- 

bên cạnh đó, các hộp bên trái không phải xếp hàng-break. Nhưng vì nó chứa một vài phần tử HTML, không chỉ là văn bản thuần túy, nên no-wrap dường như không hoạt động trên tất cả các trình duyệt.

Giải pháp tốt cho vấn đề này là gì?

EDIT

Nó không thực sự khủng khiếp quan trọng là các hộp bên phải chiếm chiều rộng còn lại, chỉ là nó vẫn luôn luôn gắn liền với phía bên phải của hộp trái.

Answer 1

Để sử dụng đúng hộp overflow: hidden; width: auto; thay vì thả nổi. Điều đó sẽ chiếm không gian còn lại mà không giảm xuống dưới bất kể có bao nhiêu nội dung. Tiếp tục thả hộp bên trái.

Answer 2

Xác định chiều rộng cố định cho cột bên trái cũng như float:left; đặt nó sau cột chính trong HTML

Hai div cho cột bên phải; bên ngoài cũng trôi nổi bên trái và với chiều rộng 100%, bên trong với lề trái có cùng chiều rộng với cột bên trái.

Answer 3

Như Stobor gợi ý: Hãy thử đặt hộp bên trái bên trong hộp ngay

<div id="rightBox"> 
    <div id="leftBox">This text will expand the left box</div> 
    <div style="float:left"> 
     Content of right box goes here<br> 
     Breaking even works... 
    </div> 
</div> 

CSS:

#rightBox { 
    width: 100%; 
    background: red; 
} 
#leftBox { 
    width: auto; 
    float: left; 
    background: blue; 
} 

trình cho tôi.

Answer 4

Nếu bạn đang sử dụng một giải pháp css thuần túy, tôi nghĩ bạn sẽ phải cung cấp cho một trong các cột một số loại hạn chế chiều rộng. Nó có thể chắc chắn không phải là một tỷ lệ phần trăm như đề xuất ở trên?

Sự cố là 2 lần. Nếu bạn nổi một cột và cung cấp cho một chiều rộng khác là 100%, vì cột nổi được loại bỏ khỏi luồng tài liệu thì chiều rộng 100% của chiều rộng khác là chiều rộng khung nhìn đầy đủ (nó bỏ qua div được thả nổi). Nếu bạn nổi cả hai mà không thiết lập chiều rộng của div thứ hai thì div sẽ (cần) co lại thành chiều rộng của phần tử con rộng nhất của nó. the w3c spec có thể giúp đỡ một số, mặc dù nó không phải là dễ đọc nhất.

Bạn luôn có thể thử sử dụng javascript để đọc chiều rộng khung nhìn và sau đó đặt độ rộng cột, nếu không tôi nghĩ bạn sẽ gặp khó khăn.

Answer 5

Bạn cũng có thể thử đặt hiển thị trình bao bọc thành bảng và các phần tử con thành ô bảng. Sau đó, bạn có thể đặt chiều rộng và chiều cao của một div là giá trị pixel cố định và chiều rộng div (động) khác thành 100%.

<style> 
* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
      box-sizing: border-box; 
} 

#container{ 
    border: solid #222 1px; 
    width: 400px; 
    height: 360px; 
    resize: both; 
    overflow: auto; 
} 

#wrap{ 
    border: solid red 1px; 
    width: 100%; 
    height: 100%; 
    display: table; 
    resize: both; 
    overflow: auto; 
} 

video{ 
    border: solid #222 4px; 
    display: table-cell; 
    width: 160px; 
    height: 160px; 
} 

#list{ 
    border: solid #222 4px; 
    display: table-cell; 
    width: 100%; 
    height: 100%; 
} 
</style> 
<div id="container"> 
    <div id="wrap"> 
    <video controls></video> 
    <br> 
    <div id="list"></div> 
    </div> 
</div> 

Ném chú chó con đó vào đó!

ps: không chắc chắn làm thế nào để làm điều này theo chiều dọc tho :(

EDIT !!!

ĐỨNG: * { -webkit-box-sizing: border-ô; -moz- hộp-sizing: border-ô; hộp kích thước: cửa hộp; }

#container{ 
    border: solid #222 1px; 
    width: 400px; 
    height: 360px; 
    resize: both; 
    overflow: auto; 
} 

#wrap{ 
    border: solid red 1px; 
    width: 100%; 
    height: 100%; 
    display: table; 
    resize: both; 
    overflow: auto; 
} 

video{ 
    border: solid #222 4px; 
    display: table-cell; 
    width: 160px; 
    height: 160px; 
} 

#median{ 
    display: table-row; 
    width: 100%; 
} 

#list{ 
    border: solid #222 4px; 
    display: table-cell; 
    width: 100%; 
    height: 100%; 
} 
</style> 
<div id="container"> 
    <div id="wrap"> 
    <video controls></video> 
    <div id="median"></div> 
    <div id="list"></div> 
    </div> 
</div>