gì đúng cách để nổi những yếu tố

Question

Tôi có đánh dấu này

<dt id="dt0"> &nbsp;         </dt> 
<dd id="dd0dd"> <textarea id="dd0"></textarea>   </dd> 

<dt id="dt1"> &nbsp;         </dt> 
<dd id="dd1dd"> <input id="dd1" type="hidden">   </dd> 

<dt id="dt2"> <label for="dd2">Dd2 Label:</label> </dt> 
<dd id="dd2dd"> <input id="dd2" type="text">   </dd> 

<dt id="dt3"> <label for="dd3">Dd3 Label:</label> </dt> 
<dd id="dd3dd"> <input id="dd3" type="text">   </dd> 

<dt id="dt4"> <label for="dd4">Dd4 Label:</label> </dt> 
<dd id="dd4dd"> <input id="dd4" type="text">   </dd> 

mà tôi cần phải nổi để nó trông như thế này (chú ý DD1 đó là một yếu tố tiềm ẩn)

_________________________________    ________________________ 
|        |  Dd2 Label |      | 
|        |    |_______________________| 
|        |  
|        |    ________________________ 
|        |  Dd3 Label |      | 
|        |    |_______________________| 
|        | 
|        |    ________________________ 
|        |  Dd4 Label |      | 
|_______________________________|    |_______________________| 

CSS không thực sự là điều của tôi, nhưng tôi đã thử một loạt các công cụ và có một cái gì đó làm việc, nhưng nó vẫn không nhìn đúng. Đây là CSS tôi có bây giờ.

#dd0dd { 
    float:left; 
} 
#dt1, #dt2, #dt3, #dt4{ 
    float:left; 
    clear:right; 
    width:80px; 
} 
#dd1dd, #dd2dd, #dd3dd, #dd4dd { 
    float:right; 
    clear:right; 
} 

Ai đó có thể cho tôi biết cách tôi có thể cải thiện CSS này để làm cho nó trông đúng.

Chỉnh sửa: Tôi muốn tôi có thể thay đổi đánh dấu để sử dụng bảng hoặc những gì không, nhưng được tạo tự động và không thể thay đổi.

Answer 1

#dt1, 
#dt0 { 
    display: none; 
} 

#dd0dd { 
    float:left; 
} 

#dt1, #dt2, #dt3, #dt4{ 
    float:left; 
    width:80px; 
} 

#dd1dd, #dd2dd, #dd3dd, #dd4dd { 
    clear:right; 
} 

Set lề, vv

Answer 2

Đến địa ngục với tableless CSS, bạn có thể đã được thực hiện vài tuần trước nếu bạn chỉ cần đặt tất cả trong một bảng, và sau đó bạn sẽ không phải chống lại sự mâu thuẫn của trình duyệt.

Chúng tôi thậm chí có một vài đồng minh:

• http://giveupandusetables.com/
• http://www.barrypearson.co.uk/articles/layout_tables/defence.htm

Dưới đây là một off giải pháp cuff:

<table> 
    <tr><td rowspan=3> 
    <dt id="dt0"> &nbsp;         </dt> 
    <dd id="dd0dd"> <textarea id="dd0"></textarea>   </dd> 
    </td></tr> 
    <tr style='display:none'><td> 
    <dt id="dt1"> &nbsp;         </dt> 
    <dd id="dd1dd"> <input id="dd1" type="hidden">   </dd> 
    </td></tr> 
    <tr><td> 
    <dt id="dt2"> <label for="dd2">Dd2 Label:</label> </dt> 
    <dd id="dd2dd"> <input id="dd2" type="text">   </dd> 
    </td></tr> 
    <tr><td> 
    <dt id="dt3"> <label for="dd3">Dd3 Label:</label> </dt> 
    <dd id="dd3dd"> <input id="dd3" type="text">   </dd> 
    </td></tr> 
    <tr><td> 
    <dt id="dt4"> <label for="dd4">Dd4 Label:</label> </dt> 
    <dd id="dd4dd"> <input id="dd4" type="text">   </dd> 
    </td></tr> 
</table> 

Answer 3

Bạn phải sử dụng <dt> và <dd> thẻ? Nếu bạn sẽ sử dụng chúng, bạn nên bao quanh tất cả chúng với một thẻ <dl>, nhưng vì bạn muốn hộp văn bản của bạn song song với nhãn của bạn thay vì thụt vào bên dưới chúng, sẽ không dễ dàng hơn khi bao quanh cả hai (nhãn và đầu vào của bạn) trong div? Điều này sẽ giúp bạn bố trí bạn đang tìm kiếm.

Answer 4

• CẬP NHẬT - thấy rằng bạn không thể chỉnh sửa html, xin vui lòng kiểm tra giải pháp này css chỉ: http://jsfiddle.net/SebastianPataneMasuelli/csXPG/4/

nó bao gồm các thẻ dl, mà cần phải có một chiều rộng thiết cho việc bố trí làm việc

phao nổi là một trong những khái niệm khó hiểu nhất của css (tôi dạy những thứ này và một trong những điều khó giải thích nhất đối với sinh viên). nhưng tôi hứa với bạn, một khi bạn đã biết css, bạn sẽ không bao giờ muốn mã lại bảng, ngoại trừ dữ liệu bảng, tốt, cho những bảng nào tuyệt vời.

Answer 5

Một số loại ghê tởm như thế này có thể làm việc nhưng nó là rất mong manh, độ rộng khác nhau và chiều cao được xác định bằng cách sử dụng "fiddle với nó cho đến khi nó hoạt động" kỹ thuật:

#dt0 { 
    display: none; 
} 

#dd0 { 
    height: 100px; 
} 

#dd0dd { 
    float: left; 
} 

#dt1, #dt2, #dt3, #dt4{ 
    float: left; 
    clear: right; 
    width: 80px; 
    margin-left: 100px; 
} 

#dd1dd, #dd2dd, #dd3dd, #dd4dd { 
    float: right; 
} 

Tính năng này hoạt động trên jsfiddle.net trong Safari, YMMV ở bất kỳ nơi nào khác. Bây giờ tôi cảm thấy dơ bẩn.