2009-05-15 9 views
5

एक यह है कि आवश्यकता नहीं है निम्नलिखित:क्या कोई साधारण 3-कॉलम, शुद्ध सीएसएस लेआउट है?

  1. रिलायंस चित्र पर (यानी "अशुद्ध कॉलम")
  2. weirdness के कुछ प्रकार या "हैक" आईई
  3. के लिए विशेष रूप में डाल आईई आवश्यक है चलाने के लिए quirks मोड में
  4. दूसरों ओवरलैपिंग (यानी "होली ग्रेल")
  5. मार्जिन उच्च ऋणात्मक संख्याओं के लिए सेट उन्हें viewscreen बंद अच्छी तरह से रखने के तीन DIVs से एक की तरह विचित्रता नहीं है (फिर से "होली ग्रेल" लेआउट)

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

मुझे यह उल्लेख करना चाहिए कि मैं बराबर ऊंचाई लेआउट की तलाश में हूं।

कोई भी?

संपादित करें: मैं केंद्र कॉलम तरल होने के साथ 100% की चौड़ाई की तलाश में हूं।

संपादित करें: मैं पिक्सल में बाएं और दाएं कॉलम की चौड़ाई निर्दिष्ट करने की भी उम्मीद कर रहा हूं।

संपादित करें: पृष्ठभूमि पारदर्शी हो सकती है, लेकिन मुझे कॉलम के बीच एक विभाजित रेखा चाहिए जो सभी तरह से ऊपर और नीचे चलता है।

+3

एरैरे मानवम - मुझे नहीं लगता कि आप हैक के बिना दूर हो पाएंगे। विशेष रूप से बराबर ऊंचाई के कारण। सीएसएस के संस्करण पर निश्चित रूप से निर्भर करता है कि आप अपना आधार बनना चाहते हैं। –

+0

आपको सीमाओं और पृष्ठभूमि रंगों/छवियों के लिए अपनी आवश्यकताओं को निर्दिष्ट करने की आवश्यकता है। पारदर्शी पृष्ठभूमि वाले 3 कॉलम और कोई सीमाएं करना आसान है। –

उत्तर

16

जब आप सीएसएस के बारे में बात करते हैं तो "सरल" जैसी कोई चीज़ नहीं होती है।

लेकिन क्रॉस ब्राउज़र का एक आसान समाधान है, जो शानदार ढंग से घटता है और पूरी तरह से HTML और CSS अनुरूप है: तीन कॉलम वाली तालिका का उपयोग करें।

तर्क: डीआईवी का मतलब गतिशील ऊंचाई नहीं है। इसलिए, सीएसएस के लिए इसका कोई समर्थन नहीं है। यदि आपको ब्लॉक तत्व की आवश्यकता है जो सुनिश्चित करता है कि उसके बच्चों की ऊंचाई समान है, तो यही तालिकाएं हैं।

[संपादित करें] अपने सभी सीएसएस कट्टरपंथियों को अपमानित करने के लिए खेद है, लेकिन स्पष्ट रूप से, जब कुछ करने के लिए कुछ डिज़ाइन नहीं किया गया है और आप इसका दुरुपयोग करते हैं, और यह काम नहीं करता है, तो कृपया शिकायत करना बंद करें, ठीक है? एक डीआईवी एक टेबल नहीं है और हैक पर भरोसा किए बिना एक के रूप में इस्तेमाल नहीं किया जा सकता है।

[EDIT2] के रूप में various places में पहले से ही कहा गया था, कारण लेआउट के लिए तालिकाओं का उपयोग करने के लिए नहीं था कि, जल्दी समय में, टेबल केवल डिजाइन तत्व और जो नेस्टेड तालिकाओं के दर्जनों था एचटीएमएल पर लेकर जाते थे। यह बुरी बात है। लेकिन इसका मतलब यह नहीं है कि सब कुछ जगह में रखने के लिए एक ही टेबल का उपयोग नहीं करना चाहिए और फिर सामान को सही दिखने के लिए सीएसएस पर भरोसा करना चाहिए।

एक मस्तिष्क पैराशूट की तरह है: यह अच्छा है लेकिन यह खुला होने पर केवल उपयोगी है।

+3

टेबल्स को डेटा के बिट्स के बीच रिश्तों को व्यक्त करने के लिए डिज़ाइन किया गया था (पंक्ति में प्रत्येक आइटम को सामान्य में कुछ और कॉलम में प्रत्येक आइटम सामान्य में कुछ है)। एक पंक्ति में सभी कोशिकाओं को एक ऊंचाई साझा करना एक परिणाम है, एक कारण नहीं है। – Quentin

+10

अच्छा, आपके पास एक लक्ष्य है और आपके पास दो टूल्स हैं। एक पर डूब गया है और दूसरा बिल बिलकुल फिट नहीं है ... आप किस का उपयोग करते हैं? –

+4

+1 जब तक यह सरल रहता है तब तक लेआउट के लिए तालिका का उपयोग करके कोई शर्म की बात नहीं है। –

1

मैं रॉबर्ट से सहमत हूं। सीएसएस नियमों की व्याख्या करने और अंतिम पृष्ठ को अलग-अलग प्रस्तुत करने वाले ब्राउज़रों के कारण मुझे संदेह है कि आपको अपनी आवश्यकताओं में अधिक लचीला होने के बिना एक आदर्श समाधान मिलेगा।

1

आप जेएस का उपयोग करके इसे प्राप्त कर सकते हैं।

यदि आप 3 डिव्स बनाने के लिए एक फ्लोट बाएं एक फ्लोट दाएं और मध्य के रूप में मार्जिन छोड़ दिया गया था & दाईं ओर एक चौड़ाई के साथ।

फिर कुछ जेएस के साथ प्रत्येक div के पास अपना स्वयं का आईडी होता है, तो आप अपनी ऊंचाई को 2 कम करने वाले लोगों को उच्चतम मूल्य पर सेट कर सकते हैं।

Jquery के साथ बहुत आसान है।

+0

सच के लिए जाने के लिए मजबूर करती है, यह जावास्क्रिप्ट के साथ आसान है ... लेकिन उसने एक शुद्ध सीएसएस समाधान मांगा। –

-2

पृष्ठ को तीन कॉलम, एक ही ऊंचाई में विभाजित करें?

<html> 
<head> 
<style type="text/css"> 
#col_wrapper{ 
    height: 400px; 
} 

.col{ 
    width: 33%; 
    float:left; 
    height: 100%; 
} 
</style> 
</head> 
<body> 
<div id="col_wrapper"> 
    <div class="col"> 
     one 
    </div> 
    <div class="col"> 
     two 
    </div> 
    <div class="col"> 
     three 
    </div> 
</div> 
</body> 

कोई quirks और सुंदर मैदान।

+1

का उल्लेख किया जाना चाहिए कि निश्चित ऊंचाई काम नहीं करेगी। एक पृष्ठ में मध्य कॉलम में टेक्स्ट के 5 पैराग्राफ हो सकते हैं, दूसरे में 25. – Sean

0

http://960.gs/

यह एक (विभिन्न अन्य लेआउट और के लिए) एक 3-कॉलम लेआउट के लिए इस्तेमाल किया जा सकता है। निजी तौर पर, मुझे नहीं लगता कि यह सब कुछ के लिए divs का उपयोग करना एक अच्छा विचार है, लेकिन यह आसान और अच्छी है .. यह काम करता है।

संपादित करें: 100% चौड़ाई लेआउट http://www.alistapart.com/articles/fluidgrids/ मदद कर सकता है, लेकिन मुझे यकीन नहीं है कि इस प्रकार का लेआउट अभी भी "सरल" के रूप में योग्य है या नहीं।

+0

क्षमा करें, यह उल्लेख करना चाहिए था कि मैं 100% चौड़ाई (केंद्र कॉलम तरल के साथ) की तलाश में हूं। – Sean

+0

हाँ, एक सूची से अलग एक छोटा परिसर दिखता है। उन लोगों में से एक जहां यह वास्तव में स्पष्ट नहीं है जो कम वांछनीय है, जटिल स्टाइलशीट का उपयोग करके, या तालिका का उपयोग करते हुए, भले ही टेबल लेआउट के लिए नहीं हैं। – Sean

5

आप हो सकता है सक्षम अनुकूलन:

http://matthewjamestaylor.com/blog/perfect-3-column.htm

+0

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

+0

यहां एक पिक्सेल चौड़ाई संस्करण है: http://matthewjamestaylor.com/blog/holy-grail-no-quirks-mode.htm –

0

YAML

"फिर भी एक और एकाधिक लेआउट" (YAML) एक (एक्स) एचटीएमएल/सीएसएस के लिए बनाने रूपरेखा है आधुनिक और लचीला फ्लोट लेआउट। संरचना बेहद अपने प्रोग्रामिंग में बहुमुखी है और अंतिम उपयोगकर्ताओं के लिए बिल्कुल सुलभ है।

इसमें कुछ आईई बग फिक्स शामिल हैं, लेकिन आप उन्हें हटा सकते हैं।

+3

इन दिनों YAML नाम की बहुत सारी चीज़ें! –

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