इनलाइन-ब्लॉक एलिमेंट को लाइन के शेष भाग को कैसे भरें?

186

क्या सीएसएस और दो इनलाइन-ब्लॉक (या जो भी) डीआईवाई टैग का उपयोग करने के बजाय तालिका का उपयोग करना संभव है?

तालिका संस्करण यह है (सीमाएँ जोड़ी गईं ताकि आप इसे देख सकें):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<table style="width:100%;">
<tr>
<td style="border:1px solid black;width:100px;height:10px;"></td>
<td style="border:1px solid black;height:10px;"></td>
</tr>
</table>
</body>
</html>

यह FIXED WIDTH (प्रतिशत चौड़ाई नहीं) के साथ एक बाएं स्तंभ का निर्माण करता है , और एक दाहिना स्तंभ जो रेखा पर स्थित रिमेनिंग स्पेस को भरने के लिए फैलता है । बहुत आसान लगता है, है ना? इसके अलावा, चूंकि कुछ भी "फ्लोटेड" नहीं है, माता-पिता कंटेनर की ऊंचाई सामग्री की ऊंचाई को ठीक से फैलाने के लिए फैलती है।

- BEGIN RANT--
मैंने मल्टी-कॉलम लेआउट के लिए "क्लियर फिक्स" और "पवित्र ग्रिल" कार्यान्वयन को निश्चित-चौड़ाई वाले साइड कॉलम के साथ देखा है, और वे चूसना और वे जटिल हैं। वे तत्वों के क्रम को उल्टा करते हैं, वे प्रतिशत चौड़ाई का उपयोग करते हैं, या वे फ्लोट्स, नकारात्मक मार्जिन का उपयोग करते हैं, और "बाएं", "दाएं" और "मार्जिन" विशेषताओं के बीच संबंध जटिल हैं। इसके अलावा, लेआउट उप-पिक्सेल संवेदनशील हैं ताकि सीमाओं, पैडिंग, या मार्जिन के एक भी पिक्सेल को जोड़कर पूरे लेआउट को तोड़ दिया जाए, और पूरे कॉलम को अगली पंक्ति में लपेटकर भेजें। उदाहरण के लिए, राउंडिंग त्रुटियां एक समस्या है, भले ही आप कुछ सरल करने की कोशिश करें, जैसे कि लाइन पर 4 तत्व डालते हैं, प्रत्येक की चौड़ाई 25% पर सेट होती है।
- RANT--

मैंने "इनलाइन-ब्लॉक" और "व्हाइट-स्पेस: नॉवरैप" का उपयोग करने की कोशिश की है, लेकिन समस्या यह है कि मैं लाइन पर शेष स्थान को भरने के लिए 2 तत्व नहीं पा सकता हूं । चौड़ाई को कुछ "चौड़ाई: 100% - (LeftColumWidth) px" की तरह सेट करना कुछ मामलों में काम करेगा, लेकिन चौड़ाई की संपत्ति में गणना करना वास्तव में समर्थित नहीं है।

css layout fixed-width

— Triynko
स्रोत

1

मुझे नहीं लगता कि ऐसा करने के लिए ऐसा करने के लिए एक समझदार तरीका है display: table-*जो इसे एक निर्माण में बदल देगा जो काम करेगा, लेकिन वास्तव में "अधिक अर्थपूर्ण" या तो ( divसूप का भयानक मामला नहीं है ) और IE6 संगतता को तोड़ता है। मैं व्यक्तिगत रूप से साथ रहना होगा <table>, जब तक कि किसी को एक प्रतिभाशाली सरल विचार है कि बिना काम करता है के साथ आने में कामयाब हो

— पेका

51

हाँ। मैं सीएसएस युग की सुबह से इन सभी "मेजों से बचें" तर्कों में भाग रहा हूं, और यदि आप अभी भी लेआउट के लिए तालिकाओं का उपयोग करते हैं, तो आपको एक अक्षम आलसी मोरन की तरह आवाज करने के लिए कहा जाता है। तेजी से एक दशक आगे, और यह अभी भी एक आदर्शवादी पाइप-सपना है। तथ्य यह है, उपयोगकर्ता इंटरफेस और रूपों की तरह निश्चित-लेकिन-लचीले लेआउट के लिए फ्लो लेआउट शब्दार्थ SUCK। सच्चाई यह है कि स्मार्ट लोग टेबल का उपयोग करेंगे जहां सुविधाजनक है, क्योंकि उन्होंने हर संभव सीएसएस समाधान को समाप्त कर दिया है और महसूस किया है कि वे सभी अपूर्ण हैं और सिर्फ एक टेबल का उपयोग करने की तुलना में अधिक जटिल हैं।

— त्रिकोको

4

तैरता? मुझे काम करने वाला कोड दिखाएं, जहां एंड-ऑफ-लाइन तत्व अप्रत्याशित रूप से लाइन-रैप नहीं करते हैं और बॉर्डर और मार्जिन लेआउट को नहीं तोड़ते हैं। यही उनके साथ गलत है। इसके अलावा, स्वचालित रूप से आकार वाले पेरेंट कंटेनर में "स्पष्ट फिक्स" हैक के साथ फ्लोटिंग तत्वों को शामिल करने के लिए ठीक से विस्तार होता है? मैंने ऐसा नहीं सोचा था।

— त्रिकोको

यदि आपको अपने मूल कंटेनर में कम से कम एक गैर-फ्लोटेड तत्व मिला है, तो यह वास्तव में फ्लोट्स को साफ़ करने के लिए "हैक" नहीं है, अब यह है? याद रखें कि सीएसएस मुद्रण में अपनी जड़ें है - देखना css-tricks.com/containers-dont-clear-floats का एक अच्छा चर्चा के लिए क्यों आप स्वत: समाशोधन नहीं मिलता है।

— चौलेट

3

@ ट्रायनको: यह वही है जो मैंने पहले बनाया था: jsfiddle.net/thirtydot/qx32C - मुझे लगता है कि यह आपके अधिकांश बिंदुओं को हिट करता है। मैं आपके द्वारा किए गए उस डेमो की आलोचना करूँगा और बाद में इसे ठीक करने का प्रयास करूँगा।

— २१:

169

देखें: http://jsfiddle.net/qx32C/36/

.lineContainer {
    overflow: hidden; /* clear the float */
    border: 1px solid #000
}
.lineContainer div {
    height: 20px
} 
.left {
    width: 100px;
    float: left;
    border-right: 1px solid #000
}
.right {
    overflow: hidden;
    background: #ccc
}

<div class="lineContainer">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

स्निपेट का विस्तार करें

मैं क्यों margin-left: 100pxसाथ बदल overflow: hiddenदिया .right?

संपादित करें: यहाँ ऊपर (मृत) लिंक के लिए दो दर्पण हैं:

— thirtydot
स्रोत

60

यदि आप खुद को एक वेब डेवलपर कहते हैं, तो आपको उस लिंक पर क्लिक करना होगा। मैंने किया, और मुझे जादू की सवारी पर जैस्मीन की तरह महसूस हुआ।

— क्रिस शोर

2

@ChrisShouts, यह संभवतः इसका वर्णन करने का सबसे अच्छा तरीका है। इस विधि का कोई मतलब नहीं है, लेकिन फिर फिर से ... कुछ के लिए एक अद्भुत समाधान जो आपको स्पष्ट रूप से करने में सक्षम होना चाहिए।

— mjvotaw

14

छिपा हुआ अतिप्रवाह एक समाधान नहीं है। मान लीजिए कि आप सही कंटेनर के अतिप्रवाह को छिपाना नहीं चाहते हैं। इससे सही कंटेनर का आकार लाइन पर शेष स्थान नहीं भरता है। यह दो साल पुराने प्रश्न का एक उदाहरण है, जिसके लिए मैंने अभी भी एक उत्तर नहीं दिया है, क्योंकि अभी भी कोई संतोषजनक उत्तर नहीं है।

— त्रिकोको

3

Triynko: भले ही आप 'अतिप्रवाह: छिपा हुआ' का उपयोग कर रहे हों, कुछ भी आम तौर पर छिपाया नहीं जाएगा (कम से कम यदि आपके पास केवल पाठ है)। Div के अंदर पाठ / तत्वों को व्यवस्थित किया जाएगा ताकि वे div के अंदर फिट हों (जब तक कि आपके पास एक तत्व नहीं है जो div से बड़ा है, निश्चित रूप से)।

— CpnCrunch 4

1

@RMorrisey: शायद सिर्फ कुछ की जरूरत box-sizing: border-boxपर divरों। बस एक अनुमान है, क्योंकि आप अपने द्वारा दिखाए गए व्यवहार को दिखाने वाला डेमो प्रदान नहीं करते हैं। किया जा रहा है ने कहा कि, आधारित समाधान आम तौर पर बेहतर है । यह एक बहुत पुराना प्रश्न है, लेकिन मुझे लगता है कि मैं ओपी के व्यवहार के कारण इस प्रश्न में तालिकाओं के साथ कुछ भी करने से बचने की कोशिश कर रहा था। display: table

— २०:१३

64

फ्लेक्सबॉक्स का उपयोग कर एक आधुनिक समाधान:

.container {
    display: flex;
}
.container > div {
    border: 1px solid black;
    height: 10px;
}

.left {
   width: 100px;
}

.right {
    width: 100%;
    background-color:#ddd;
}

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

स्निपेट का विस्तार करें

http://jsfiddle.net/m5Xz2/100/

— पानू होर्समलहटी
स्रोत

4

प्रदर्शन फ्लेक्स और चौड़ाई 100% .. याद रखना होगा

— सपने देखने वालों

9

फ्लेक्स का उपयोग करते समय, flex: 1इसके बजाय उपयोग क्यों नहीं किया जाता है width: 100%?

— इटाई बार-हैम

फ्लेक्सबॉक्स के लिए नए लोगों के लिए : के flex: 1लिए आशुलिपि है flex-grow: 1। यह एक संयोजन विशेषता है flex: <grow> <shrink> <basis>:।

— तानीस

1

बस एक त्वरित नोट जो प्रदर्शित करता है: फ्लेक्स IE <11 में असमर्थित है, और 11. में बहुत छोटी गाड़ी है

— एरिक शील्ड

1

@EricShields इसे Flexbox का उपयोग करने से किसी को नहीं रोकना चाहिए। आजकल हम flexbugsआपको जानते हैं।

— न्यूरोट्रांसमीटर

47

सामान्य आधुनिक ब्राउजर के साथ संगत (IE 8+): http://jsfiddle.net/m5Xz2/3/

.lineContainer {
    display:table;
    border-collapse:collapse;
    width:100%;
}
.lineContainer div {
    display:table-cell;
    border:1px solid black;
    height:10px;
}
.left {
    width:100px;
}

 <div class="lineContainer">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

स्निपेट का विस्तार करें

— फ्रॉस्टी जेड
स्रोत

9

तालिकाओं का उपयोग करने के खिलाफ तर्क का इसकी प्रस्तुति विशेषताओं से कोई लेना-देना नहीं है। यह असहनीय मार्कअप, स्टाइल / डॉक्यूमेंट मडलिंग और अनुचित शब्दार्थ के साथ करना है। इनमें से कोई भी तर्क लागू नहीं होता है display:table।

— रिच रिमेर

यह इस बात का उत्तर नहीं देता है inline-blockकि शेष रेखा को कैसे भरा जाए।

— न्यूरोट्रांसमीटर

1

@TranslucentCloud मैं मानता हूं कि मेरा उत्तर प्रश्न शीर्षक का ठीक-ठीक उत्तर नहीं देता है, लेकिन यह divs का उपयोग करके उपलब्ध चौड़ाई को भरने का एक तरीका प्रदान करता है, जैसा कि प्रश्न निकाय में पूछा गया है।

— फ्रॉस्टी जेड

1

मुझे यह समाधान बहुत पसंद है। आप कुछ अजीब शैली का उपयोग करने के लिए मजबूर नहीं हैं जो छिपे हुए सीएसएस तर्क (जैसे कि अतिप्रवाह छिपा हुआ) से उत्पन्न होते हैं।

— चॉस्ट डे

4

आप प्रदर्शन तत्व के साथ तरल तत्व पर कैल्क (100% - 100px) का उपयोग कर सकते हैं: दोनों तत्वों के लिए इनलाइन-ब्लॉक।

ध्यान रखें कि टैग के बीच कोई जगह नहीं होनी चाहिए, अन्यथा आपको अपने कैल्क में भी उस स्थान पर विचार करना होगा।

.left{
    display:inline-block;
    width:100px;
}
.right{
    display:inline-block;
    width:calc(100% - 100px);
}


<div class=“left”></div><div class=“right”></div>

त्वरित उदाहरण: http://jsfiddle.net/dw689mt4/1/

— SuperIRis
स्रोत

1

मैंने flex-growइस लक्ष्य को प्राप्त करने के लिए संपत्ति का उपयोग किया है। आपको display: flexमूल कंटेनर के लिए सेट करना होगा , फिर आपको flex-grow: 1उस ब्लॉक के लिए सेट करना होगा जिसे आप शेष स्थान भरना चाहते हैं, या flex: 1जैसा कि टिप्पणियों में उल्लिखित तानीस ।

— व्लादिस्लाव कोवेचेनकोव
स्रोत

0

यदि आप overflow: hidden(क्योंकि आप नहीं चाहते हैं overflow: hidden) का उपयोग नहीं कर सकते हैं या यदि आप सीएसएस हैक / वर्कअराउंड को नापसंद करते हैं, तो आप इसके बजाय जावास्क्रिप्ट का उपयोग कर सकते हैं। ध्यान दें कि यह जावास्क्रिप्ट के रूप में अच्छी तरह से काम नहीं कर सकता है।

var parent = document.getElementsByClassName("lineContainer")[0];
var left = document.getElementsByClassName("left")[0];
var right = document.getElementsByClassName("right")[0];
right.style.width = (parent.offsetWidth - left.offsetWidth) + "px";
window.onresize = function() {
  right.style.width = (parent.offsetWidth - left.offsetWidth) + "px";
}

.lineContainer {
  width: 100% border: 1px solid #000;
  font-size: 0px;
  /* You need to do this because inline block puts an invisible space between them and they won't fit on the same line */
}

.lineContainer div {
  height: 10px;
  display: inline-block;
}

.left {
  width: 100px;
  background: red
}

.right {
  background: blue
}

<div class="lineContainer">
  <div class="left"></div>
  <div class="right"></div>
</div>

स्निपेट का विस्तार करें

http://jsfiddle.net/ys2eogxm/

— निक मैनिंग
स्रोत

0

जब आप इनलाइन ब्लॉक छोड़ देते हैं

.post-container {
    border: 5px solid #333;
    overflow:auto;
}
.post-thumb {
    float: left;
    display:block;
    background:#ccc;
    width:200px;
    height:200px;
}
.post-content{
    display:block;
    overflow:hidden;
}

http://jsfiddle.net/RXrvZ/3731/

( सीएसएस फ्लोट से: पाठ के बाईं ओर एक छवि फ्लोटिंग )

— Fanky
स्रोत