Co znajduje się w odpowiedni sposób do pływaka te elementy

Question

Mam tego markup

<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> 

które muszę się unosić tak, że wygląda to tak (zauważ, że DD1 jest ukrytym elementem)

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

CSS to nie jest moja rzecz, ale wypróbowałem całą masę rzeczy i udało mi się coś zrobić, ale nadal nie wygląda to dobrze. Oto CSS, który mam teraz.

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

Czy ktoś może mi powiedzieć jak mogę poprawić ten CSS, aby wyglądać dobrze.

Edycja: Szkoda, że ​​nie mogę zmienić znaczników, aby używać tabel, a co nie, ale jest generowany automatycznie i nie można go zmienić.

Answer 1

#dt1, 
#dt0 { 
    display: none; 
} 

#dd0dd { 
    float:left; 
} 

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

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

Ustaw marginesy itp

Answer 2

Do diabła z tableless CSS, zrobiłbyś to kilka tygodni temu, jeśli po prostu włożysz wszystko do stołu, a wtedy nie będziesz musiał walczyć z niespójnościami przeglądarki.

Mamy nawet kilka sojusznicy:

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

Oto off roztworze mankietu:

<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

Czy trzeba używać <dt> i <dd> tagi? Jeśli chcesz ich użyć, powinieneś otoczyć je wszystkie tagiem <dl>, ale skoro chcesz, aby twoje pola tekstowe były obok siebie z etykietą, zamiast wciskać się pod nimi, czy nie byłoby łatwiej otaczać je (twoja etykieta i wkład) w div? Dostaniesz układ, którego szukasz.

Answer 4

• AKTUALIZACJA - widząc, że nie można edytować html, proszę sprawdzić ten css tylko rozwiązanie: http://jsfiddle.net/SebastianPataneMasuelli/csXPG/4/

Obejmuje ona tag DL, który musi mieć szerokość ustawiona dla układu do pracy

css floats to jedna z najbardziej mylących koncepcji css (uczę rzeczy i jest to jedna z najtrudniejszych rzeczy do wyjaśnienia uczniom). ale obiecuję, że gdy już poznasz css, już nigdy nie będziesz chciał koduować tabeli, z wyjątkiem dobrze, tabelarycznych danych, dla których stoły są niesamowite.

Answer 5

Jakiś ohydę jak to może działać, ale jest bardzo kruchy, różne szerokości i wysokości zostały określone za pomocą „skrzypce z nim, dopóki nie działa” technika:

#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; 
} 

To działa na jsfiddle.net w Safari, YMMV gdziekolwiek indziej. Czuję się teraz brudny.