एक ही क्षैतिज स्तर पर दो divs रखकर

मुझे दो div तत्वों को एक ही क्षैतिज स्तर पर रखना होगा। जिस तरह से मैंने किया है, वैसे ही दूसरा व्यक्ति पहले के तहत प्रदर्शित होता है। मैं उन्हें इस तरह से रखना चाहता हूं कि वे संक्रमण के दौरान एक-दूसरे को पार करें।एक ही क्षैतिज स्तर पर दो divs रखकर

1-Here संपादित करें जब बटन को अपनी कक्षाओं को स्वैप करने के लिए दबाया जाता है, divs ऊपर और नीचे बढ़ते हैं।

#aaidi,#aaidi3 { 
-webkit-transition: margin-left 1s ease-in-out; 
-moz-transition: margin-left 1s ease-in-out; 
-o-transition: margin-left 1s ease-in-out; 
transition: margin-left 1s ease-in-out; 
} 
.left { 
margin-left: 45%; 
border: 1px solid green ; 
width: 20px; 
height: 4px; 
background: #FF0000; 
} // similar for right with margin-left:55% 
...... 
     <tr> 
      <td colspan=3> 
       <div id="aaidi" class="left"> 
       </div> 
       <div id="aaidi3" class="right"> 
       </div> 
      </td> 
     </tr> // after this there is a button pressing whom changes the class of both divs.

स्रोत

2012-04-05 Sumit Sinha

प्रिय मेरा उत्तर देख सकते हैं और मुझे पता है अगर मैं कुछ जहां चल रहा हैं। – w3uiguru

धन्यवाद दिनेश, लेकिन जब मैं वहां बटन डालता हूं तो यह काम नहीं कर रहा है। अपने उत्तर में टिप्पणियां देखें। –

[यहां] (http://jsfiddle.net/ht6M9/3/) जब बटन को अपनी कक्षाओं को स्वैप करने के लिए दबाया जाता है, divs ऊपर और नीचे बढ़ते हैं। –

एक span प्रयोग करें, या आप display:inline-block

स्रोत

2012-04-05 16:41:33

के लिए शैली सेट कर सकते हैं आप प्राप्त कर सकते हैं इस float संपत्ति का उपयोग कर:

<style type="text/css"> 
    div.container { 
     margin: 15px; 
    } 
    div.left, div.right { 
     float: left; 
     padding: 10px;  
    } 
    div.left { 
     background-color:orange;  
    } 
    div.right { 
     background-color: yellow;  
    } 
</style> 

<div class="container"> 
    <div class="left">Left</div> 
    <div class="right">Right</div> 
</div>

प्रर्दशित करने के लिए इस jsFiddle देखें।

enter image description here

स्रोत

2012-04-05 16:42:53

कृपया देखें कि यह काम क्यों नहीं कर रहा है [लिंक] (http://jsfiddle.net/ht6M9/1/) .. –

यह अगली पंक्ति पर जा रहा है क्योंकि संयुक्त मार्जिन 100% के बराबर है, जो तत्व को छोड़ने के लिए मजबूर करता है अगली पंक्ति। यह अद्यतन पहेली देखें: http://jsfiddle.net/ht6M9/2/ –

[यहां] (http://jsfiddle.net/ht6M9/3/) जब बटन को अपनी कक्षाओं को स्वैप करने के लिए दबाया जाता है, divs ऊपर और नीचे जाते हैं । –

मेरा मानना है कि आप divs नाव

.float-left{ 
    float:left; 
} 

<div id="aaidi" class="float-left left"></div> 
<div id="aaidi3" class="float-left right"></div>

सही div अभी भी एक 'ब्लॉक' तत्व के रूप में देखा जा रहा है, तो चाहते हैं तो यह पूरे तक का समय लग जाएगा: यहाँ उत्पादन है पंक्ति। दोनों तत्वों को तैरने की जरूरत है, या विशिष्ट चौड़ाई सेट करने की आवश्यकता है।

स्रोत

2012-04-05 16:43:18

यदि आप उन्हें एक तरफ होने की आवश्यकता है तो बस सभी divs को छोड़ दें।

div की सामग्री के आधार पर, आपको प्रत्येक वर्ग को चौड़ाई आवंटित करने की आवश्यकता हो सकती है।

स्रोत

2012-04-05 16:46:11 zigojacko