खाली डिव स्पेस लेने का तरीका

Question

यह मेरा 960 ग्रिड सिस्टम मामला है:

<div class="kundregister_grid_full">
    <div class="kundregister_grid_1">ID</div>
    <div class="kundregister_grid_1">Namn</div>
    <div class="kundregister_grid_1">Anv.Namn</div>
    <div class="kundregister_grid_1">Email</div>
    <div class="kundregister_grid_1">Roll</div>
    <div class="kundregister_grid_1">Aktiv</div>
</div>

यह मेरा एक सेट संरचना के रूप में उपयोग किए जाने वाले डिव का सेट है।

सीएसएस निम्नलिखित कहता है:

.kundregister_grid_1 {
    display: inline-block;
    float: left;
    margin: 0; 
    text-align: center;
}
.kundregister_grid_1 {
    width: 140px;
}

स्वीडिश नामकरण बुरा मत मानना। मैं चाहता हूं कि डिव्स दिखा दें, भले ही उनका कोई मूल्य न हो।

<div class="kundregister_grid_full">
 <div class="kundregister_grid_1">ID</div>
 <div class="kundregister_grid_1"></div>
 <div class="kundregister_grid_1"></div>
 <div class="kundregister_grid_1">Email</div>
 <div class="kundregister_grid_1">Roll</div>
 <div class="kundregister_grid_1">Aktiv</div>
</div>

इस तरह, इस मामले में दो कॉलमों में कोई 'नमन' और 'एवन.नाम' नहीं है। हालांकि जब क्रोम में इसे चलाते हैं, तो उन्हें हटा दिया जाता है, और क्रम में अन्य divs को धक्का नहीं देते हैं float:left। इसलिए यदि मेरे पास ऊपर दिए गए एक ही विभाग में श्रेणियां हैं, तो मूल्यों को गलत श्रेणी में रखा जाएगा।

Answer 1

यह काम करता है अगर आप फ्लोटिंग को हटा दें। http://jsbin.com/izoca/2/edit

फ्लोट के साथ यह केवल तभी काम करता है जब कुछ सामग्री जैसे  

Comments

एक अन्य जवाब में कहा गया है कि एक न्यूनतम ऊंचाई में डालने से यह काम करेगा जब यह तैर जाएगा, और निश्चित रूप से मेरे खुद के मामले में काम करेगा। अगर वह हमेशा सच है (अब, 2016 में) तो यह जवाब गलत है। आप केवल न्यूनतम ऊंचाई जोड़ सकते हैं: 1 पीएक्स; चौड़ाई के लिए: 140px; बिना फ्लोट को हटाने या सामग्री को जोड़ने की आवश्यकता के बिना।

— निक राइस

element.text(" ");JQuery में कोशिश की और  पृष्ठ पर दिखाई देता है।

— लोरी

Answer 2

 खाली वस्तुओं को जोड़ने का प्रयास करें ।

मुझे समझ नहीं आता कि आप <table>यहाँ क्यों नहीं उपयोग कर रहे हैं ? वे इस तरह का सामान अपने आप करेंगे।

Comments

माना। यदि यह सारणीबद्ध डेटा है, तो तालिका का उपयोग करें - यही वे लिए हैं।

— दान डिप्लो

इस समय के बाद, लोग अभी भी <table>== BAD को मानते हैं ।

— 18:15 बजे

 लोकप्रिय समाधान के रूप में उपयोग करना , कुछ परिदृश्यों में मुद्दों का कारण बन सकता है। जैसे जब आप स्ट्राइक-आउट ( text-decoration: line-through;) टेक्स्ट को स्ट्रोक को दिखाते हैं  , जबकि आप वास्तव में जो चाहते हैं वह सिर्फ एक कोरा div है।

— इज़्हाकी

@Pekka 웃, "तालिकाओं का उपयोग करना" हमेशा संभव नहीं होता है। मेरे पास एक ही समस्या है ("कैसे एक खाली डिव स्पेस लेने के लिए जगह") एक उत्तरदायी डिजाइन के लिए जहां मैं एक ऊर्ध्वाधर तालिका में एक ऊर्ध्वाधर तालिका बनाता हूं जब चौड़ाई कम होती है। मैं पहले से ही तालिकाओं का उपयोग कर रहा हूं ...

— ANEves

@ सारणी हमेशा इस मामले में चौड़ाई को सही ढंग से रखेगी, हालाँकि, नहीं? निश्चित नहीं कि मैं इसका अनुसरण करता हूं ....

— पेका

Answer 3

@ No1cobla उत्तर पर थोड़ा अपडेट करें। यह अवधि छुपाता है। यह समाधान IE8 + में काम करता है।

.class:after
{
    content: '.';
    visibility: hidden;
}

Comments

यदि आप इसे एक कमबैक के रूप में काम करने के लिए उपयोग करना चाहते हैं जब आप खाली हैं तो कुछ इस तरह जोड़ें:.class:after:empty

— मिगुएल गारिडो

@ मिगेल गारिडो - मुझे उपयोग करना था। .class: खाली: उसके बाद काम करने के लिए।

— दूसरी बार

Answer 4

खाली फ्लोट किए गए विभाजनों के लिए एक सरल समाधान जोड़ना है:

• चौड़ाई (या न्यूनतम चौड़ाई)
• मिनट-ऊंचाई

इस तरह आप फ्लोट की कार्यक्षमता रख सकते हैं और खाली होने पर इसे भरने के लिए मजबूर कर सकते हैं।

मैं इस तकनीक का उपयोग पेज लेआउट कॉलमों में करता हूं, ताकि हर कॉलम अपनी स्थिति में रहे, भले ही अन्य कॉलम खाली हों।

उदाहरण:

.left-column
{
   width: 200px;
   min-height: 1px;
   float: left;
}

.right-column
{
    width: 500px;
    min-height: 1px;
    float: left;
}

Comments

min-heightसबसे अच्छा उपाय है

— वल 3 य

न्यूनतम ऊंचाई केवल समस्या को हल करती है width। हालाँकि, यह div को शून्य ऊंचाई होने से नहीं रोकता है। (समस्या को देखने के लिए div पृष्ठभूमि सेट करने का प्रयास करें)। इसलिए & nbsp; एक अधिक सामान्य समाधान है। इसके अलावा सामग्री: "।" शून्य ऊंचाई की समस्या को ठीक करता है।

— जॉन हेनकेल

एक न्यूनतम ऊंचाई = 1px 0 के बराबर नहीं है! यह 1 px होगा, यदि आप डिफ़ॉल्ट ऊँचाई चाहते हैं, तो आप बस मिनट-ऊँचाई = 100px और न्यूनतम चौड़ाई = 100px कह सकते हैं, div हमेशा 100x100 होगी कोई रास्ता नहीं यह 0 होगा

— Engineeroholic

और "& nbsp" का उपयोग करने के लिए बहुत बुरा अभ्यास है, क्या होगा यदि आपके पास कई फ़ाइलों वाली एक बड़ी वेबसाइट है और प्रत्येक फ़ाइल में 10K HTML लाइनें हैं? अगर मैं आपके दृष्टिकोण का पालन करूंगा तो मैं हर फ़ाइल में प्रत्येक के अंदर "& nbsp" डाल दूंगा !! क्या समय की बर्बादी है!? यदि आपके पास उपयोगकर्ता-जनित सामग्री वेबसाइट है तो क्या होगा? जैसे कोई उपयोगकर्ता खाली टिप्पणी प्रस्तुत करता है .. आपके समाधान के आधार पर मुझे यह जांचने के लिए एक कोड बनाना होगा कि क्या टिप्पणी खाली है, तो "& nbsp" जोड़ें (बिना किसी अच्छे कारण के उलझन में) न्यूनतम ऊंचाई और न्यूनतम चौड़ाई सबसे अच्छा समाधान है क्योंकि मैं इसे एक बार लिखूंगा और इसके बारे में फिर से चिंता नहीं करूंगा, भले ही मैं भविष्य में और सामग्री जोड़ूं

— Engineeroholic

Answer 5

बस एक छद्म तत्व के अंदर एक शून्य चौड़ाई अंतरिक्ष चरित्र जोड़ें

.class:after {
    content: '\200b';
}

Comments

Oooh, मुझे यह विचार पसंद आया क्योंकि इसका मतलब है कि उपयोगकर्ता गलती से इसे कॉपी-पेस्ट नहीं करेंगे, छद्म तत्व डिफ़ॉल्ट रूप से अचयनित हैं।

— डोमिनोज

Answer 6

ये एक तरीका है:

.your-selector:empty::after {
    content: ".";
    visibility: hidden;
}

Comments

मैं शून्य चौड़ाई वाले स्थान केcontent: "\200b"; लिए सलाह देता हूं । अतिरिक्त लाभ यह है कि ब्राउज़र इस चरित्र का चयन नहीं करेगा (जैसे अभी भी वही व्यवहार करेगा)। CTRL+A CTRL+C

— yyny

Answer 7

आप ऐसा कर सकते हैं:

ओ सेट .kundregister_grid_1:

• width(या width-min) के साथ height(या min-height)
• या padding-top
• या padding-bottom
• या border-top
• या border-bottom

o या छद्म तत्वों का उपयोग करें : ::beforeया इसके ::afterसाथ:

• {content: "\200B";}
• या {content: "."; visibility: hidden;}।

o या  खाली तत्व के अंदर रखा जा सकता है, लेकिन यह कभी-कभी अप्रत्याशित प्रभाव ला सकता है। के साथ सम्मिलन मेंtext-decoration: underline;

Answer 8

सिर्फ अपने सीएसएस-क्लास में "मिनट-चौड़ाई" क्यों न जोड़ें?

Answer 9

  काम करता है, लेकिन यह सही तरीका नहीं है जो मुझे लगता है कि w न्यूनतम ऊंचाई: 1px;

Answer 10

इनलाइन-ब्लॉक का उपयोग करने के साथ यह इनलाइन ऑब्जेक्ट के रूप में व्यवहार करेगा। इसलिए उन्हें एक पंक्ति में प्रत्येक अभिभावक के बगल में लाने के लिए कोई फ़्लोट्स की आवश्यकता नहीं थी। और वास्तव में जैसा कि रिटो ने कहा, तैरने के लिए "शरीर" की आवश्यकता होती है, जैसे उन्हें आयामों की आवश्यकता होती है।

मैं तालिकाओं के उपयोग के बारे में पक्के से पूरी तरह सहमत हूं। हर कोई है कि div की बचने की मेज का उपयोग कर लेआउट बनाने की तरह यह एक निराशा है। लेकिन उन्हें टेबुलर डेटा के लिए उपयोग करें! यही वे लिए हैं। और आपके मामले में मुझे लगता है कि आपको उनकी आवश्यकता है :)

लेकिन अगर आप वास्तव में चाहते हैं कि आप वास्तव में क्या चाहते हैं। एक सीएसएस हैक तरीका है। फ्लोट हैक के समान।

.kundregister_grid_1:after {  content: ".";  }

उसे जोड़ें और आप भी सेट हैं: D (नोट: IE में काम नहीं करता है, लेकिन यह निश्चित है)

Answer 11

यदि उन्हें तैरने की आवश्यकता होती है, तो आप हमेशा मिनट-ऊंचाई को 1px तक निर्धारित कर सकते हैं ताकि वे ध्वस्त न हों।

Answer 12

लेआउट टैग के एक कस्टम सेट के निर्माण में, मुझे इस समस्या का एक और जवाब मिला। बशर्ते यहां टैग और उनके सीएसएस कक्षाओं का कस्टम सेट हो।

एचटीएमएल

<layout-table>
   <layout-header> 
       <layout-column> 1 a</layout-column>
       <layout-column>  </layout-column>
       <layout-column> 3 </layout-column>
       <layout-column> 4 </layout-column>
   </layout-header>

   <layout-row> 
       <layout-column> a </layout-column>
       <layout-column> a 1</layout-column>
       <layout-column> a </layout-column>
       <layout-column> a </layout-column>
   </layout-row>

   <layout-footer> 
       <layout-column> 1 </layout-column>
       <layout-column>  </layout-column>
       <layout-column> 3 b</layout-column>
       <layout-column> 4 </layout-column>
   </layout-footer>
</layout-table>

सीएसएस

layout-table
{
    display : table;
    clear : both;
    table-layout : fixed;
    width : 100%;
}

layout-table:unresolved
{
    color : red;
    border: 1px blue solid;
    empty-cells : show;
}

layout-header, layout-footer, layout-row 
{
    display : table-row;
    clear : both;   
    empty-cells : show;
    width : 100%;
}

layout-column 
{ 
    display : table-column;
    float : left;
    width : 25%;
    min-width : 25%;
    empty-cells : show;
    box-sizing: border-box;
    /* border: 1px solid white; */
    padding : 1px 1px 1px 1px;
}

layout-row:nth-child(even)
{ 
    background-color : lightblue;
}

layout-row:hover 
{ background-color: #f5f5f5 }

यहाँ कुंजी बॉक्स-आकार और पैडिंग है।