सीएसएस: मल्टी-कॉलम लेआउट जिसमें क्षैतिज नियम

से जुड़े ब्लॉक शामिल हैं, मैं निम्न लेआउट के लिए सीएसएस बनाने की कोशिश कर रहा हूं। यह एक टेबल के समान है, लेकिन मैं इसका उपयोग एक्सएमएल प्रस्तुत करने के लिए कर रहा हूं जिसमें टैब्यूलर डेटा नहीं है।सीएसएस: मल्टी-कॉलम लेआउट जिसमें क्षैतिज नियम

मुझे दो कॉलम और एक या अधिक क्षैतिज नियम (अदृश्य रेखाएं) उन स्तंभों के माध्यम से चलना चाहते हैं। नियमों के बीच लंबवत स्थान उस पंक्ति की कोशिकाओं में सामग्री की अधिकतम ऊंचाई से तालिका की पंक्ति ऊंचाई की तरह निर्धारित होता है।

इस "तालिका" में सभी "कोशिकाओं" में दो वैकल्पिक ब्लॉक होते हैं। ऊपरी ब्लॉक ऊपरी नियम के नीचे गठबंधन किया गया है। निचला ब्लॉक निचले नियम के ऊपर गठबंधन किया गया है। यहाँ एक उदाहरण है:

CSS goal

के ऊपर और नीचे ब्लॉक दोनों वैकल्पिक हैं, इसलिए प्रत्येक "सेल" निम्नलिखित विन्यास में से एक होगा। ब्लॉक में निश्चित ऊंचाई नहीं है; उनमें टेक्स्ट हो सकता है जो "सेल" की चौड़ाई के आधार पर लपेटता है।

All possible "cell" configurations

इस के बाद से मैं display:table साथ यह प्रतिपादन की कोशिश की इतना एक मेज की तरह है,। पहली समस्या: मैं एक ही table-cell के अंदर ऊपरी और निचले ब्लॉक दोनों कैसे बना सकता हूं? यहां मेरा first attempt है।

मुझे लगता है कि यह अपने कंटेनर के नीचे एक ब्लॉक "फ़्लोटिंग" की समस्या के बराबर है। this question के स्वीकृत उत्तर से पता चलता है कि यह संभव नहीं हो सकता है।

एक्सएमएल टुकड़ा

यहाँ एक्सएमएल मैं रेंडर करने के लिए कोशिश कर रहा हूँ का एक सरलीकृत नमूना है।

<block> 
    <horizontal-rule> 
     <column> 
      <above-rule>When in the Course of human events</above-rule> 
     </column> 
     <column> 
      <above-rule>to dissolve the political bands</above-rule> 
      <below-rule>it becomes necessary for one people</below-rule> 
     </column> 
     <column> 
      <below-rule>which have connected them with another</below-rule> 
     </column> 
    </horizontal-rule> 
</block>

इसे काम करने के प्रयास में, मैं अपने मूल XML स्कीमा में संशोधन के साथ प्रयोग कर रहा हूं। इस दूसरे एक्सएमएल नमूने में, आसन्न क्षैतिज नियम द्वारा समूहित करने के बजाय, मैं पंक्ति से ग्रुपिंग की तरह एक और "टेबल" की कोशिश कर रहा हूं। अनुवाद में, <above-rule><cell-bottom> और <below-rule><cell-top> बन जाता है। मैं मूल पसंद करता हूं, लेकिन मैंने इस के साथ और प्रगति की है।

<block> 
    <row> 
     <cell> 
      <cell-bottom>When in the Course of human events</cell-bottom> 
     </cell> 
     <cell> 
      <cell-top>it becomes necessary for one people</cell-top> 
      <cell-bottom>to dissolve the political bands</cell-bottom> 
     </cell> 
     <cell> 
      <cell-top>which have connected them with another</cell-top> 
     </cell> 
    </row> 
</block>

एक सच बदसूरत समाधान

मैं एक विचार है कि विशेष रूप से बदसूरत है। मैं अपनी एक्सएमएल स्कीमा को संशोधित कर सकता हूं और सटीक उसी सामग्री के साथ दो बार दोहराए जाने के लिए पूरे एक्सएमएल <block> की आवश्यकता है। फिर मैंने <block> की दोनों प्रतियां एक रैपर तत्व <block-wrapper> में रखीं और मैं रैपर के पहले बच्चे और रैपर के अंतिम बच्चे के लिए अलग शैलियों को परिभाषित करता हूं।

पहला बच्चा शीर्ष पर सेल सामग्री को संरेखित करता है और <bottom> ब्लॉक छुपाता है। अंतिम बच्चा नीचे सेल सामग्री को संरेखित करता है और <top> ब्लॉक छुपाता है।

मैं दो प्रस्तुत टेबल को बिल्कुल ओवरलैप करने के लिए position:absolute का उपयोग करता हूं।

यहां एक implementation of this idea है।

प्रश्न

वहाँ ऐसा करने का एक बेहतर तरीका है?
मैंने टेबल और सीएसएस के बारे में बहुत सी बहसें पढ़ी हैं। display:table एक स्मार्ट दृष्टिकोण है?
क्या मेरे मूल XML स्कीमा का उपयोग करने का कोई तरीका है?
मैं केवल एक्सएमएल दस्तावेज़ वितरित करने में सक्षम होना चाहता हूं और सीएसएस के साथ एक उपयोगकर्ता इसे ब्राउज़र में देख सकता है। लेकिन सीएसएस के साथ प्रस्तुत करना आसान है जो मध्यस्थ एक्सएमएल स्कीमा बनाने के लिए, एक्सएमएल-ट्रांसफॉर्मेशन चरण डालने के बजाय बेहतर होगा? (उस मामले में मेरा बदसूरत समाधान इतना बुरा नहीं हो सकता है।)

स्रोत

2013-11-01 dlh

संरचना की तरह एक टेबल ऐसा करने का एकमात्र तरीका होगा, मुझे लगता है। संरेखण प्रभाव के लिए आपको कोशिकाओं और 'रोशन' की आवश्यकता होगी हालांकि मुझे यकीन नहीं है कि यह वास्तविक '

' तत्व के बिना किया जा सकता है या नहीं? यह प्रश्न ऐसा सुझाव देता है: [सीएसएस - प्रभाव की तरह रोशन] (http://stackoverflow.com/q/13585789) (उत्तर में 'स्थिति: पूर्ण' वर्कअराउंड बदसूरत आईएमओ है) –

मुझे एक रोशन-जैसे प्रभाव पर संदेह है काम नहीं करेगा इसे देखें [उदाहरण] (http://dabblet.com/gist/7272902)। – dlh

उदाहरण मेरे ब्राउज़र में ठीक दिखता है, शायद मुझे समस्या नहीं दिखाई दे रही है? –

उत्तर

आपको टेबल का उपयोग करने की आवश्यकता नहीं है। इसे आज़माएं (केवल क्रोम में परीक्षण किया गया):

<html> 
<head> 
<title>CSS</title> 
</head> 


<style type="text/css"> 
div { 
    float: left; 
    width: 100px; 
    margin-left: 10px; 
    margin-right: 10px; 
    border-width: 1px; 
    border-style: solid; 
    visibility: visible; 
    height: 50%; 
    background-color: white; 
    position: relative; 
} 

div div { 
    background-color: grey; 
    z-index: 3; 
} 

div#OUTER { 
    width: 100%; 
    display: block; 
    height: 600px; 
    border: 0; 
} 

span { background-color: white; width: 100%; } 

.line { width: 100%; visibility: visible; z-index: 5; } 
.top { position: absolute; top: 10%; } 
.bottom { position: absolute; bottom: 10%; } 
.red-line { border: solid 2px red; } 
.blue-line { border: solid 2px blue; } 
.top-line { position: absolute; top: 2%; } 
.bottom-line { position: absolute; bottom: 50%; } 
</style> 

<body> 

    <div id="OUTER" style=""> 
     <hr class="line red-line top-line" /> 
     <hr class="line blue-line bottom-line" /> 
     <div> 
      <span class="top">11111<br>111111<br>111111111</span> 
     </div> 
     <div> 
      <span class="bottom">22222</span> 
     </div> 
     <div> 
      <span class="bottom">33333<br>33333<br>33333</span> 
     </div> 
     <div> 
      <span class="top">44444<br>44444<br>4444<br>4444</span> 
      <span class="bottom">55555<br>555555<br>5555<br>5555</span> 
     </div> 
    </div> 
</body> 
</html>

स्रोत

2013-11-03 11:55:44 resigned

विचार के लिए धन्यवाद। दुर्भाग्यवश यह क्षैतिज नियमों के बीच लंबवत स्थान को स्वत: आकार नहीं देता है। यदि आपके समाधान में "4" या "5" स्पैन बहुत बड़े हो जाते हैं, तो वे इसके बजाय ओवरलैप करते हैं। – dlh

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