hai divs cạnh nhau, một chiều rộng 100% chiều rộng khác phụ thuộc vào nội dung

Question

Tôi muốn đặt hai thẻ DIV cạnh nhau mà không sử dụng chiều rộng cố định. Div đầu tiên mở rộng nội dung của nó và div thứ hai sẽ lấp đầy khoảng trống còn lại. Ngoài ra, div không được ngồi trên đầu trang của div khác, bởi vì chúng có một hình nền trong suốt vì vậy nếu chúng giao nhau thì nó đáng chú ý. Tôi đã thử tất cả các khả năng mà tôi có thể nghĩ ra nhưng không thể tìm thấy một giải pháp bằng cách sử dụng thẻ DIV.

Tôi có thể thực hiện việc này bằng BẢNG, nhưng có thể thực hiện điều đó bằng DIV không? Hay đây là điều mà DIV không thể làm được?

Dưới đây là các mã:

  #right{ 
       background: green;  
       width: 100%; 
      } 
      #left { 
       margin-top: 5px; /* to test if they intersect*/ 
       background: red; 
      } 
      #container { 
       width: 800px; 
      } 
      <div id="container"> 
       <div id="left"> This div is as big as it's content</div> 
       <div id="right"> rest of space</div> 
      </div> 

Cảm ơn đã trả lời!

Answer 1

Xem:http://jsfiddle.net/kGpdM/

#left { 
    background: #aaa; 
    float: left 
} 
#right { 
    background: cyan; 
    overflow: hidden 
} 

này hoạt động trong tất cả các trình duyệt hiện đại và IE7 +.

Cột bên trái sẽ chính xác rộng bằng nội dung bên trong. Cột bên phải sẽ chiếm không gian còn lại.

overflow: hidden "lừa" đằng sau câu trả lời này là explained here.