HTML/CSS दो ऑटो चौड़ाई कॉलम

Question

मैं एक अविश्वसनीय रूप से मुश्किल समय निम्न प्रभाव को प्राप्त करने आ रही हैं:

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

कृपया ध्यान दें कि मैं:

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

मैं निम्न HTML उपयोग कर रहा हूँ पठनीयता के लिए एचटीएमएल छीन लिया है।

क्या कोई सुझाव दे सकता है कि इस प्रभाव को प्राप्त करने के लिए मुझे किस सीएसएस का उपयोग करना चाहिए? मैं display: table का उपयोग नहीं करना चाहूंगा क्योंकि मैं आईई 7 तक पहुंचने वाली क्रॉस-ब्राउज़र संगतता की तलाश में हूं।

Answer 1

<table> या display: table के बिना यह "अविश्वसनीय रूप से कठिन" है .. जब तक आप नहीं जानते कि कैसे!

देखें:http://jsfiddle.net/thirtydot/aLgwt/

यह IE7 में काम करता है और अधिक से अधिक + सभी आधुनिक ब्राउज़रों।

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

यह एक स्पष्टीकरण है कि यह is here क्यों काम करता है।

Answer 2

BTW, तुम सही तय स्तंभ लेकिन साथ छोड़ दिया एक है करना चाहते हैं तो ऑटो के साथ आप के लिए इस पद्धति को बदल सकते हैं:

सीएसएस:

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

ध्यान दें, कि label चाहिए वैसे भी input से पहले का पालन करें।