Làm cách nào để thả hai div cạnh nhau mà không chỉ định chiều rộng?

Tôi có hai div, số đầu tiên không có nhiều nội dung và thứ hai có nhiều nội dung. Tôi muốn chúng nổi bên nhau sao cho div đầu tiên chỉ rộng bằng văn bản và div thứ hai lấp đầy lượng không gian ngang còn lại. Và, tôi không muốn chỉ định chiều rộng cố định.Làm cách nào để thả hai div cạnh nhau mà không chỉ định chiều rộng?

Đây là sự xuất hiện mong muốn sử dụng các bảng: http://jsfiddle.net/enRkR/

thể này dễ dàng được thực hiện với phao CSS, hoặc là một cách bố trí bàn cách duy nhất để đạt được điều này trông?

Nguồn

2011-11-11 Nick Clark

Vâng, bạn có thể làm điều đó với css & nó làm việc trong tất cả các trình duyệt. Làm như thế này:

.right{ 
    overflow:hidden; 
    background:red; 
} 
.left{ 
    float:left; 
    background:green; 
}

Kiểm tra ví dụ sống này http://jsfiddle.net/enRkR/8/

Nguồn

2011-11-11 04:19:44 sandeep

Cảm ơn bạn! Overflow: hidden là phép thuật tôi đã mất tích. –

vui lòng giúp đỡ :) – sandeep

Wow, mind-boggling. Ai sẽ nghĩ 'overflow: hidden; 'là câu trả lời. Nếu tôi có thể 1000-up câu trả lời này tôi sẽ;) Cảm ơn! – pixelfreak

Hãy thử điều này:

<div> 
    <div id="div1" style="float:left"> 
    content 
    </div> 
    <div id="div2" > 
    content 
    </div> 
<div>

Hoặc

tham khảo này: How to style Div elements as Tables

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"> 
<head><title>table using divs</title> 
<style type="text/css"> 
    .div-table{display:table; border:1px solid #003399;} 
    .div-table-caption{display:table-caption; background:#009999;} 
    .div-table-row{display:table-row;} 
    .div-table-col{display:table-cell; padding: 5px; border: 1px solid #003399;} 
</style> 
</head> 
<body> 
<div class="div-table"> 
    <div class="div-table-caption">This is a caption</div> 
    <div class="div-table-row"> 
    <div class="div-table-col">1st Column</div> 
    <div class="div-table-col">2nd Column</div> 
</div> 
</div> 
</body> 
</html>

Lưu ý: Để sử dụng các giá trị thuộc tính CSS, bạn cần phải có một trình duyệt web hỗ trợ chúng. Thật không may, mà dịch để một số lượng hạn chế của các trình duyệt web như IE 8, Firefox 3, Opera 9 và vân vân

Nguồn

2011-11-11 04:17:11

<div style="float:left">less content</div> 
<div>More content More content 
</div>

Nguồn

2011-11-11 04:19:35 tmjam

Làm cách nào để thả hai div cạnh nhau mà không chỉ định chiều rộng?

Trả lời

Các vấn đề liên quan