दो divs

Question

के बीच लंबवत रेखा को जोड़ने के लिए कैसे मैं दो divs के बीच एक लंबवत रेखा बनाना चाहता हूँ। हमारे पास क्षैतिज रेखा के लिए "घंटा" है लेकिन मुझे लगता है कि ऊर्ध्वाधर के लिए कोई नहीं। वैसे भी मैं सीमा का उपयोग किए बिना इसे बना सकता हूं? मान लें कि मेरे पास यह कोड उदाहरण के लिए है।

<style> 
#wrapper_1 { 
    background-color:pink; 
    height:100px; 
    float:left; 
    width: 100px; 
} 

#wrapper_2 { 
    background-color:brown; 
    height:100px; 
    width: 100px; 
    float:right; 
} 
</style> 

<div id="wrapper_1"> 
    Creating slideshows PHP 
</div> 

<div id="wrapper_2"> 
    Creating slideshows with WordPress 
</div> 

Answer 1

तुम भी एक ऊर्ध्वाधर विभाजक बनाने के लिए छद्म तत्वों का उपयोग कर सकते हैं। विभाजक बनाने के लिए आपको एक अतिरिक्त div की आवश्यकता नहीं है केवल छद्म तत्वों का उपयोग करें और अपनी आवश्यकताओं के अनुसार इसे शैली दें।

#wrapper_1 { 
 
    background-color: pink; 
 
    height: 100px; 
 
    float: left; 
 
    width: 100px; 
 
} 
 
#wrapper_1:after { 
 
    content: ""; 
 
    background-color: #000; 
 
    position: absolute; 
 
    width: 5px; 
 
    height: 100px; 
 
    top: 10px; 
 
    left: 50%; 
 
    display: block; 
 
} 
 
#wrapper_2 { 
 
    background-color: brown; 
 
    height: 100px; 
 
    width: 100px; 
 
    float: right; 
 
}

<div id="wrapper_1"> 
 
    Creating slideshows PHP 
 
</div> 
 

 
<div id="wrapper_2"> 
 
    Creating slideshows with WordPress 
 
</div>

पुनश्च: छद्म तत्वों की पूर्ण स्थिति से सावधान रहें। धन्यवाद।

Answer 2

अपने दो div के बीच एक नया div बनाएँ और जोड़ने के इस वर्ग:

.vertical-row { 
Float:left; 
height:100px; 
width:1px; /* edit this if you want */ 
background-color: your color 
} 

Answer 3

आप <hr> इसके अर्थ की दृष्टि से सही रूप में उपयोग कर सकते हैं, और फिर सीएसएस का उपयोग यह एक खड़ी रेखा में बदलने के लिए।

सिर्फ एक आवरण में लपेट तत्वों और है कि एक प्रदर्शन करना: तालिका सेल

hr.vertical { 
    height:100%; //you might need some positioning for this to work, see other questions about 100% height 
    width:0; 
    border:1px solid black; 
} 

Answer 4

यकीन है कि आप कर सकते हैं

।

.bigwrapper{ 
    display:table; 
    width:100%; 
} 

दूसरा:

.vr{ 
    width:1px; 
    display:table-cell; 
    background-color:black; 
    height:100%; 

} 

अंतिम डेमो में:

https://plnkr.co/edit/uJsmrCaF9nns49J5RcYj?p=preview

Answer 5

मैं नहीं कर रहा हूँ इस प्रकार अपने दो रैपर और यह शैली के बीच एक और div चौड़ाई वर्ग "VR" बनाने एक सीएसएस हैकर लेकिन यह मैं यह कैसे करूँगा .. कृपया ध्यान दें कि आपको फ़्लोटिंग तत्वों के बाद clear: both; का उपयोग करना चाहिए।

एचटीएमएल:

<div class="container"> 

    <div id="wrapper_1"> 
     Creating slideshows PHP 
    </div> 

    <div class="seperator"></div> 

    <div id="wrapper_2"> 
     Creating slideshows with WordPress 
    </div> 

    <div class="clearfix"></div> 

</div> 

सीएसएस:

#wrapper_1 { 
    background-color:pink; 
    height:100px; 
    float:left; 
    width: 100px; 
} 

#wrapper_2 { 
    background-color:brown; 
    height:100px; 
    width: 100px; 
    float:right; 
} 

.seperator { 
    height: 100%; 
    width: 1px; 
    background: black; 
    top: 0; 
    bottom: 0; 
    position: absolute; 
    left: 50%; 
} 

.container { 
    position: relative; 
} 

.clearfix { 
    clear: both; 
} 

डेमो: jsfiddle