HTML/CSS İki otomatik genişlik kolonlar

Question

Ben aşağıdaki etkiye ulaşmak inanılmaz zor bir zaman yaşıyorum:

<dl> 
    <dt> 
    <label>Variable Width</label> 
    </dt> 
    <dd> 
    <input style="width: 100%" /> 
    </dd> 
</dl> 

o I unutmayın: Aşağıdaki HTML kullanıyorum

========================================================== 
= Variable Width = <input style="width: 100%" />  = 
========================================================== 

okunabilirlik için HTML'yi kırpmış.

Bu efekti elde etmek için CSS kullanmam gerekenleri önerebilecek biri var mı? IE7'ye ulaşan çapraz tarayıcı uyumluluğunu aradığım için display: table'u kullanmak zorunda kalmamayı tercih ederim.

Answer 1

Bu, <table> veya display: table olmadan yapmanın "ne kadar zor olduğunu" bilirsiniz.

Bkz:http://jsfiddle.net/thirtydot/aLgwt/

Bu IE7 çalışır ve daha fazla + tüm modern tarayıcılar.

dt { 
    float: left 
} 
dd { 
    overflow: hidden; 
    padding: 0 4px 0 9px 
} 
dd input { 
    width: 100% 
} 

Neden çalıştığına dair bir açıklama is here.

Answer 2

BTW, sabit sağ sütun ancak sol tane isterseniz otomatik ile size bu deseni değiştirebilirsiniz:

CSS:

dt { 
    float: right; 
} 
dd { 
    overflow: hidden; 
    padding: 0 4px 0 9px; 
} 
dd input { 
    width: 100% 
} 

Bildirim, o label gerektiği zaten input'dan önce izleyin.