केंद्र div ब्लॉक लेकिन अंतिम पंक्ति में नहीं

मैं वास्तव में अंतिम पंक्ति के अपवाद के साथ केंद्रित डीवी ब्लॉक रखने की कोशिश कर रहा हूं।केंद्र div ब्लॉक लेकिन अंतिम पंक्ति में नहीं

किसी और ने पहले से ही इस समस्या को बनाया है जो कि मेरे प्रश्न का प्रदर्शन करता है। जब आप खिड़की का आकार बदलते हैं तब भी आप परिणाम पैनल में ब्लॉक कैसे केंद्रित रह सकते हैं। मैं समान व्यवहार करना चाहता हूं लेकिन यदि अंतिम पंक्ति में पंक्तियों की तुलना में कम ब्लॉक हैं, तो उस अंतिम पंक्ति को केंद्रित नहीं होना चाहिए, लेकिन गठबंधन छोड़ दिया जाना चाहिए। कारण है कि मैं सिर्फ नाव का उपयोग नहीं करते http://jsfiddle.net/zbbHc/1/

किसी ने पूछ सकते हैं::

यहाँ बेला है छोड़ दिया है। इसके साथ समस्या यह है कि मुझे अपने रैपर के लिए निश्चित चौड़ाई निर्दिष्ट किए बिना उस विधि का उपयोग करके अपने ब्लॉक को केंद्रित करने का कोई तरीका नहीं मिला। मैं सबकुछ जितना संभव हो उतना तरल रखने की कोशिश कर रहा हूं।

स्रोत

2012-07-27 Sony packman

बहुत रोचक, मुझे आश्चर्य है कि यह शुद्ध सीएसएस – Kos

के साथ किया जा सकता है, आपका रैपर कितना विस्तृत है? क्या इससे कोई फर्क पड़ता है कि पंक्ति पर कितनी वस्तुएं हैं? – JohnC

महान सवाल! @ जॉनसी के प्रश्न के विस्तार के रूप में, जब आप कहते हैं कि अपने रैपर पर निश्चित चौड़ाई लागू नहीं करना चाहते हैं तो क्या आपका मतलब है कि आप दो "कॉलम" के लिए निश्चित चौड़ाई निर्धारित नहीं करना चाहेंगे? –

http://jsfiddle.net/zbbHc/45/

सुनिश्चित नहीं हैं कि इस बेला की कोशिश करें, लेकिन मुझे लगता है यह अधिकतम हम अकेले सीएसएस का उपयोग कर सकते है।

अद्यतन: (यह, सभी मामलों में काम नीचे जो सभी मामलों [मुझे लगता है] में काम कोड की जांच नहीं करेगा)

एचटीएमएल

<div class="wrapper"> 
    <div class="iB"></div> 
    <div class="iB"></div> 
    <div class="iB"></div> 
    <div class="iB"></div> 
    <div class="iB"></div> 
    <div class="iB"></div> 
    <div class="iB"></div> 
    <div class="iB hide"></div> 
    <div class="iB hide"></div> 
</div>

सीएसएस

.wrapper { 
    width: 100%; 
    background: red; 
    text-align: center; 
    text-align-last: left; 
} 

.iB { 
    display:inline-block; 
    width: 200px; 
    height: 100px; 
    background: green; 
} 
.iB.hide { 
    visibility:hidden; 
}

jQuery का उपयोग कर त्वरित और गंदे विधि यहां है। यह अदृश्य तत्व जोड़ देगा स्वचालित रूप से

फिडल यहाँ http://jsfiddle.net/fD6fn/

<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<script type="text/javascript" src="lib/jquery-1.6.2.min.js"></script> 
<style> 
.wrapper { 
    width: 100%; 
    background: red; 
    text-align: center; 
    text-align-last: left; 
} 

.iB { 
    display:inline-block; 
    width: 200px; 
    height: 100px; 
    background: green; 
} 
.iB.hide { 
    visibility:hidden; 
} 
 
</style> 
</head> 

<body> 
<div class="wrapper" id="wrapper"> 
    <div class="iB"></div> 
    <div class="iB"></div> 
    <div class="iB"></div> 
    <div class="iB"></div> 
    <div class="iB"></div> 
    <div class="iB"></div> 
    <div class="iB"></div> 
</div> 
<script language="javascript"> 
function findHiddenElementCount() { 
var $wrapper = $("#wrapper"), 
    itemWidth = "200", 
    count = "", 
    itemCount = 7; 

    count = $wrapper.width()/itemWidth; 

// Some wild logic below, can be optimized. 
return parseInt(count) - (itemCount - (parseInt(itemCount/parseInt(count)) * parseInt(count))) ; 
} 



function addInvisibleElements() 
{ 
    // Delete invisible items 
    $("#wrapper .iB.hide").remove(); 


    var c = findHiddenElementCount(); 

    for(var i = 0; i < c;i++) 
    { 
     $("#wrapper").append('<div class="iB hide"></div>'); 
    } 

} 

$(window).bind("resize",addInvisibleElements); // resize handler 

$(document).ready(addInvisibleElements); // take care during page load 

</script> 
</body> 
</html>

स्रोत

2012-07-27 15:56:31 kiranvj

दुर्भाग्यवश, क्रोम में जिसके परिणामस्वरूप सबकुछ बाएं गठबंधन हो रहा है। –

मुझे लगता है कि आपको इसे फिर से जांचना चाहिए और अपने ब्राउज़र आकार के साथ खेलना चाहिए। ऐसा लगता है कि यह मेरे लिए पूरी तरह से काम करता है, सिवाय इसके कि जब मुझे अपनी खिड़की बड़ी हो जाए तो मुझे और छिपी हुई पंक्तियां जोड़ने की ज़रूरत है। ओपी के बाद क्या है, इस और जावास्क्रिप्ट का मिश्रण, या बस छिपी हुई पंक्तियों की एक बड़ी संख्या को जोड़ना चाहिए। – travis

मुझे यह एक बहुत ही रोचक सुझाव मिलता है, हालांकि इस दृष्टिकोण के कुछ नकारात्मक पहलू हैं, मुख्य चिंता यह है कि छिपे हुए ब्लॉक रैपर को लंबवत रूप से लंबे समय तक विस्तारित करने का कारण बनते हैं .. एक और समस्या (मेरे लिए) यह है कि मैं अलग-अलग परिस्थितियों में डाले जाने वाले अदृश्य ब्लॉक की मात्रा निर्धारित करने के लिए जावास्क्रिप्ट का उपयोग कैसे करें, इस बारे में कोई जानकारी नहीं है। –

आप प्रतिशत का उपयोग क्यों नहीं करते? http://jsfiddle.net/zbbHc/38/ है कि कैसे द्रव लेआउट के सबसे आम तौर पर काम करते हैं

स्रोत

2012-07-27 15:49:49 Paradise

यह केंद्रित नहीं है। क्रोम में, कम से कम। –

क्योंकि मुझे इसे पृष्ठ पर केंद्रित करने की आवश्यकता है .. –

संरेखण केंद्र वास्तव में पुराना है और अब एक खराब समाधान है, जो कुछ लोगों को उपयोग करना बंद कर देना चाहिए, केंद्रों के केंद्रों के कई तरीके हैं, ट्विटर बूटस्ट्रैप की जांच करें, 960। जीएस तरल पदार्थ और आपको फ्लड लेआउट कैसे काम करते हैं, इस बारे में महान उदाहरण मिलेगा http://twitter.github.com/bootstrap/examples/fluid.html – Paradise

जब आप कहते हैं 'यदि' अंतिम पंक्ति कम ब्लॉक हैं आप मतलब है कि यह गतिशील सामग्री है? आप जानते हैं कि यह तो एक होगा यदि आप बस इसे (आदि और किसी भी मार्जिन)

.iB:last-child{ 
    position:relative; 
    left:-100px; 
    background:blue; 
}

http://jsfiddle.net/zbbHc/54/

स्रोत

2012-07-27 16:13:57

हाय! मुझे नहीं पता कि आखिरी पंक्ति में कितने ब्लॉक हैं क्योंकि मुझे संभावित उपयोगकर्ता के ब्राउज़र विंडो आकार को नहीं पता है। यदि ब्राउज़र विंडो बहुत व्यापक है, तो अधिक ब्लॉक एक पंक्ति ect में फिट होते हैं। –

आह मैं देखता हूँ। हम्म, उस मामले में मुझे नहीं लगता कि डोम पंक्तियों में स्क्रीन पर जो कुछ भी देखता है, उसे 'पंक्तियों' के रूप में पंजीकृत करना होगा, अगर यह रेखा को तोड़ने से पहले एक पंक्ति में बहुत से सामान डाल रहा है तो यह पंक्तियों को पहचान नहीं पाएगा। मैं गलत हो सकता था। मैं शोध करने जा रहा हूँ! दिलचस्प सवाल! –

आधा अपनी ही चौड़ाई के मान यह एक मेज के साथ ऐसा करना संभव हो सकता है के लिए अपेक्षाकृत स्थित कर सकते हैं (हालांकि मैं टेबल से बचने की कोशिश करता हूं)। तालिका-कोशिकाओं के आयाम उनकी सामग्री द्वारा निर्धारित किए जाते हैं (बेशक, आप अपना स्वयं का, या अधिकतम/न्यूनतम आयाम जोड़ सकते हैं)। आपके पास एक कॉलम के साथ एक टेबल हो सकती है और (हालांकि यह सबसे अच्छा अभ्यास नहीं है) तालिका में divs एम्बेड करें (प्रत्येक div एक ब्लॉक है)।

तालिका की चौड़ाई तरल पदार्थ होगी क्योंकि यह व्यापक सेल की चौड़ाई पर आधारित होगी (इस प्रकार, ब्लॉक अच्छी तरह से ऊपर आ जाएंगे और बहुत साफ दिखेंगे), और आप हार्ड-कोड या स्क्रिप्ट (बेशक, मैं स्क्रिप्टिंग का सुझाव देता हूं) यह जांचने के लिए एक शैली/विधि है कि अंतिम पंक्ति में कम ब्लॉक हैं, और यदि यह उस सेल के लिए टेक्स्ट-एलाइन को बायीं ओर सेट करता है।

यह समाधान शायद कुछ सुधार का उपयोग कर सकता है, लेकिन यह आपके लिए क्या उपयोग करने जा रहा है इसके आधार पर यह एक अच्छी शुरुआत हो सकती है।

स्रोत

2012-07-27 17:08:13

केंद्र div ब्लॉक लेकिन अंतिम पंक्ति में नहीं

उत्तर

संबंधित मुद्दे