सीएसएस -

कृपया देखें http://jsfiddle.net/UGmA2/7/ TIAसीएसएस -

1 div कंटेनर 2 divs संरेखित दो divs बाएँ और दाएँ एक ही लाइन पर। दूसरी div को पहली पंक्ति पर रखना चाहते हैं लेकिन इसे दाईं ओर सभी तरह से रखना है। वर्ग के लिए

enter image description here किसी भी मदद की सराहना की जाएगी,

<body background-color: #000000;> 
    <div id="footer-container" style="width=980px;"> 
     <div id="div-left"> 
      <ul id="footer"> 
       <li id="text_separator"><a href="http://www.stackoverflow.org">Text</a> 

       </li> 
       <li><a href="http://www.stackoverflow.org/about"><img src="http://jsfiddle.net/img/logo.png" width="35" height="30" border="1"/></a> 

       </li> 
       <li><a href="http://www.stackoverflow.org/about"><img src="http://jsfiddle.net/img/logo.png" width="35" height="30" border="1"/></a> 

       </li> 
       <li><a href="http://www.stackoverflow.org/about"><img src="http://jsfiddle.net/img/logo.png" width="35" height="30" border="1"/></a> 

       </li> 
       <li><a href="http://www.stackoverflow.org/about"><img src="http://jsfiddle.net/img/logo.png" width="35" height="30" border="1"/></a> 

       </li> 
      </ul> 
     </div> 
     <div id="div-left"> 
      <ul id="footer"> 
       <li id="text_separator"><a href="http://www.stackoverflow.org">Text1</a> 
        <li id="text_separator"><a href="http://www.stackoverflow.org">Text2</a> 

         <li id="text_separator"><a href="http://www.stackoverflow.org">Text3</a> 

          <li id="text_separator"><a href="http://www.stackoverflow.org">Text4</a> 
      </ul> 
     </div> 
    </div> 
</body>

स्रोत

2013-11-01 Lacer

अपनी भविष्य की वेब कैरियर के लिए एक सहायक टिप, 'ids' अद्वितीय हैं और केवल एक पर एक बार इस्तेमाल किया जा सकता पृष्ठ जबकि 'कक्षाएं' अद्वितीय नहीं हैं। वे एक ही पृष्ठ पर कई बार इस्तेमाल किया जा सकता है। –

परिवर्तन div id। आपके पास एक ही पृष्ठ पर दो आईडी नहीं हो सकते हैं। divs को चौड़ाई दें जैसे width:45% और इन वस्तुओं को फ़्लोट करें।

ऐसा लगता है कि पहले div की चौड़ाई दूसरी पंक्ति को नीचे की ओर मजबूर कर रही है।

स्रोत

2013-11-01 01:09:28 otherDewi

पहले div करने के लिए इस <div id="second-div" style="float-right;width:400px> आशा की तरह दूसरी div के लिए यह <div id="first-div" style="float-left;width:400px>

है जैसे कि यह करने के लिए एक शैली को जोड़ने में मदद करता है इस

स्रोत

2013-11-01 01:10:29

शैली "फ्लोट" का उपयोग करते हुए मांग करेंगे कि आप शैली "चौड़ाई" का उपयोग इसलिए कंटेनर की चौड़ाई बाहर मापने उचित चौड़ाई पता करने के लिए आंतरिक divs

स्रोत

2013-11-01 01:25:56

को आवंटित करने के लिए एक ही id का उपयोग करते हुए बार-बार एक अच्छा विचार नहीं है, मैं यह सब class

में बदल 63,210 यहाँ

संशोधन

है

<body > 
    <div class="footer-container"> 
    <div class="div-left"> 
     <ul class="footer"> 
     <li><a href="http://www.stackoverflow.org">Text</a> 
     </li> 
     <li><a href="http://www.stackoverflow.org/about"><img src="http://jsfiddle.net/img/logo.png" width="35" height="30" border="1"/></a> 
     </li> 
     <li><a href="http://www.stackoverflow.org/about"><img src="http://jsfiddle.net/img/logo.png" width="35" height="30" border="1"/></a> 
     </li> 
     <li><a href="http://www.stackoverflow.org/about"><img src="http://jsfiddle.net/img/logo.png" width="35" height="30" border="1"/></a> 
     </li> 
     <li><a href="http://www.stackoverflow.org/about"><img src="http://jsfiddle.net/img/logo.png" width="35" height="30" border="1"/></a> 
     </li> 
     </ul> 
    </div> 
    <div class="div-right"> 
     <ul class="footer"> 
     <li><a href="http://www.stackoverflow.org">Text1</a></li> 
     <li><a href="http://www.stackoverflow.org">Text2</a></li> 
     <li><a href="http://www.stackoverflow.org">Text3</a></li> 
     <li><a href="http://www.stackflow.org">Text4</a></li> 
     </ul> 
    </div> 
    </div> 
</body>

सीएसएस:

body{ 
    background-color: #000000; 
} 
.div-left{ 
    float:left; 
    padding-left:10px; 
} 
.div-right{ 
    float:right; 
    padding-right:10px; 
} 
.footer-container{ 
    height:40px; 
    max-width:980px; 
    border:1px solid salmon; 
    padding-top:5px; 
} 
.footer { 
    height:30px; 
    line-height:30px; 
    border:solid 1px #E5E5E5; 
} 
.footer li { 
    list-style-type:none; 
    float:left; 
    padding-left:10px; 
} 
.footer a { 
    text-decoration:none; 
    color:#0088CC; 
} 
.footer li:nth-child(1) { 
    text-decoration:none; 
    height:30px; 
    display:block; 
    background-image:url('http://s7.postimg.org/w0nt224pj/bc_separator.png'); 
    background-repeat:no-repeat; 
    background-position:right; 
    padding-right: 15px; 
} 
ul { 
    list-style-type:none; 
    padding:0px; 
    margin:0px; 
}

LIVE DEMO

स्रोत

2013-11-01 01:51:11 xnome

सीएसएस -

उत्तर

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