Làm thế nào nhiều div (kích thước động) chia sẻ 100% chiều rộng?

Question

Tôi đã có cấu trúc html sau:

<div style="width:100%"> 
    <div style="float:left; width:70%"><input /></div> 
    <div style="float:left">element with unknown width</div> 
    <div style="float:left; width=30%"><input /></div> 
    <div style="clear:both" /> 
</div> 

Những gì tôi muốn đạt được như sau:

• (Yêu cầu) Các div ngoài nên sử dụng 100% độ rộng màn hình
• (Yêu cầu) Ba div bên trong nên chia sẻ 100% này với nhau
• (Yêu cầu) Div thứ hai, giữa hai số khác, chiếm một số lượng không gian không rõ
• Hai trường nhập phải sử dụng hết tất cả dung lượng còn lại, nhưng trường đầu tiên sẽ nhận 70% số còn lại, còn giá trị thứ nhất nhận 30%

Làm sao có thể thực hiện điều này?

Answer 1

@RoToRa: Xin cảm ơn mẹo. chiều rộng

Distribute 70:30

<div style="display:table; width:100%"> 
    <div style="display:table-cell; width:70%"> 
    <input style="width:100%"/> 
    </div> 
    <div style="display:table-cell; width:1px"> 
    <a style="white-space:nowrap">Some Text</a> 
    </div> 
    <div style="display:table-cell; width=30%"> 
    <input style="width:100%;" /> 
    </div> 
</div> 

Solution, nơi mà các lĩnh vực đầu vào đầu tiên lấy tất cả các không gian dư thừa, và các lĩnh vực đầu vào thức đã cố định:: Tôi đoán đây là giải pháp cuối cùng cho vấn đề này

<div style="display:table; width:100%"> 
    <div style="display:table-cell; width:100%"> 
    <input style="width:100%"/> 
    </div> 
    <div style="display:table-cell; width:1px"> 
    <a style="white-space:nowrap">Some Text</a> 
    </div> 
    <div style="display:table-cell; width=100px"> 
    <input style="width:100px;" /> 
    </div> 
</div> 

Answer 2

Điều gì đang xác định chiều rộng của div trung? Khi số điểm đại diện của tôi sẽ tối thiểu, tôi không phải là một nhà phát triển có kinh nghiệm, nhưng tôi nghĩ đây là điểm mấu chốt của vấn đề của bạn. Nếu nó không quan trọng thì chiều rộng của cột giữa là gì thì tỷ lệ div là 70%, 0%, 30% và 7%, 90%, 3%. là câu trả lời toán học tương đương với vấn đề của bạn. Vì vậy, giải pháp của bạn có thể đơn giản như:

<div style="width:100%"> 
    <div style="float:left; width:7%">Some elements here.</div> 
    <div style="float:left; width:90%">Some more elements here.</div> 
    <div style="float:left; width:3%">Even more elements here.</div> 
</div> 

Answer 3

Bảng được coi là xấu, nhưng dường như chúng giải quyết được vấn đề. Tôi vẫn quan tâm đến một giải pháp mà không javascript hoặc bảng, nếu có ai có thể tìm thấy một ...

phân phối còn lại không gian với tỷ lệ 70:30

<table width="100%"> 
    <tr> 
    <td style="width:70%"> 
     <input style="width:100%"/> 
    </td> 
    <td> 
     <a>Some Text</a> 
    </td> 
    <td style="width:30%"> 
     <input style="width:100%"/> 
    </td> 
    </tr> 
</table> 

lĩnh vực đầu vào đầu tiên sử dụng hết tất cả các không gian còn lại, trong khi ô cuối cùng có chiều rộng cố định:

<table width="100%"> 
    <tr> 
    <td style="width:100%"> 
     <input style="width:100%"/> 
    </td> 
    <td> 
     <a>Some Text</a> 
    </td> 
    <td style="width:100px"> 
     <input style="width:100px"/> 
    </td> 
    </tr> 
</table>