मैं एक ही पंक्ति पर दो divs कैसे रखूं?

मैं suckerfish के समान ड्रॉपडाउन मेनू पर काम कर रहा हूं। मुझे ड्रॉपडाउन पक्ष अब काम कर रहा है, लेकिन मेरे पास कुछ छवियां हैं जिन्हें मैं लिंक के दोनों तरफ डालने की कोशिश कर रहा हूं। अभी मैं एक div का उपयोग छवि के आकार का उपयोग कर रहा हूं, फिर मुझे जिस छवि की आवश्यकता है उसे background-image प्रॉपर्टी सेट करना (ताकि यह छद्म: होवर क्लास का उपयोग करके बदल सके)।मैं एक ही पंक्ति पर दो divs कैसे रखूं?

यहाँ सीएसएस लागू होता है यही कारण है:

ul#menu3 li { 
    color: #000000; 
    float: left; 
    /*I've done a little playing around here, doesn't seem to do anything*/ 
    position: relative; 
    /*margin-bottom:-1px;*/ 

    line-height: 31px; 
    width: 10em; 
    padding: none; 
    font-weight: bold; 
    display: block; 
    vertical-align: middle; 
    background-image: url(../../images/dropdown/button-tile.gif); 
} 
.imgDivRt { 
    width: 20px; 
    height: 31px; 
    display: inline; 
    float: right; 
    vertical-align: middle; 
    background-image: url(../../images/dropdown/button-right.gif); 
} 
.imgDivLt { 
    width: 20px; 
    height: 31px; 
    display: inline; 
    float: left; 
    vertical-align: middle; 
    background-image: url(../../images/dropdown/button-left.gif); 
}

मैं चयनकर्ताओं उपयोग कर रहा था विभिन्न वर्गों होने पर एक छोटे से बचाने के लिए, लेकिन इंटरनेट एक्सप्लोरर यहाँ उन्हें :(

समर्थन करने के लिए प्रतीत नहीं होता

<li><div class="imgDivLt"></div>Option 1<div class="imgDivRt"></div> 
<ul> 
    <li><a href="#"><div class="imgDivLt"></div>Sub 1<div class="imgDivRt"></div></a> 
     <ul> 
      <li><a href="#"><div class="imgDivLt"></div>Sandwich<div class="imgDivRt"></div></a></li> 
      <li><a href="#"><div class="imgDivLt"></div>Sandwich<div class="imgDivRt"></div></a></li> 
      <li><a href="#"><div class="imgDivLt"></div>Sandwich<div class="imgDivRt"></div></a></li> 
      <li><a href="#"><div class="imgDivLt"></div>Sandwich<div class="imgDivRt"></div></a></li> 
      <li><a href="#"><div class="imgDivLt"></div>Sandwich<div class="imgDivRt"></div></a></li> 
      <li><a href="#"><div class="imgDivLt"></div>Sandwich<div class="imgDivRt"></div></a></li> 
     </ul> 
    </li> 
    <li><a href="#"><div class="imgDivLt"></div>Sub 2<div class="imgDivRt"></div></a> 
    <ul> 
      <li><a href="#"><div class="imgDivLt"></div>Sub 1<div class="imgDivRt"></div></a></li> 
      <li><a href="#"><div class="imgDivLt"></div>Sub 2<div class="imgDivRt"></div></a> </li> 
      <li><a href="#"><div class="imgDivLt"></div>Sub 3<div class="imgDivRt"></div></a></li> 
      <li><a href="#"><div class="imgDivLt"></div>Sub 4<div class="imgDivRt"></div></a></li> 
      <li><a href="#"><div class="imgDivLt"></div>Sub 5<div class="imgDivRt"></div></a></li> 
      <li><a href="#"><div class="imgDivLt"></div>Sub 6<div class="imgDivRt"></div></a></li> 
     </ul> 
    </li> 
    <li><a href="#"><div class="imgDivLt"></div>Sub 3<div class="imgDivRt"></div></a></li> 
    <li><a href="#"><div class="imgDivLt"></div>Sub 4<div class="imgDivRt"></div></a></li> 
    <li><a href="#"><div class="imgDivLt"></div>Sub 5<div class="imgDivRt"></div></a></li> 
    <li><a href="#"><div class="imgDivLt"></div>Sub 6<div class="imgDivRt"></div></a></li> 
</ul> 
</li> 
<li><div class="imgDivLt"></div>Option 2<div class="imgDivRt"></div>

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

स्रोत

2012-05-10 Riet

इस विषय आप मदद कर सकता है :) http://stackoverflow.com/questions/1964297/split-div-into-2-columns-using-css आप एक 'span' जो स्वाभाविक रूप से है' इनलाइन इस्तेमाल कर सकते हैं –

', 'div' की बजाय जो स्वाभाविक रूप से 'ब्लॉक' है। –

इनपुट के लिए धन्यवाद। मैंने 'span' और 'clear: दोनों' का उपयोग करने का प्रयास किया है, क्या किसी विशिष्ट प्रकार के तत्व पर 'स्पष्ट' उपयोग करने की आवश्यकता है? – Riet

(एकदम दाएं कम से कम में) आप इनलाइन इस तरह से दो divs कर सकते हैं बैठता है:

display:inline; 
float:left;

स्रोत

2012-05-10 18:55:52

फिर दोनों बाईं ओर तैर सकते हैं, ऐसा कोई नियम नहीं है कि वे क्यों नहीं कर सकते हैं। वे बस बाईं ओर पतन करेंगे। साथ ही, यह ध्यान रखना महत्वपूर्ण है कि आपको इनलाइन * और * फ्लोट प्रदर्शित करने की आवश्यकता नहीं है। – MetalFrog

जहां मेरे कोड में वास्तव में मुझे यह रखना है? यह पहले से ही मेरे दोनों divs पर उपयोग किया जा रहा है, और जब मैं इसे ब्लॉक में डाल दिया, यह उम्मीद के रूप में काम नहीं किया। – Riet

@Riet, IE11 में, मुझे इसे प्रत्येक डीवी में जोड़ना था जिसे मैं उसी पंक्ति पर चाहता था। इसे अगले बाहरी डीआईवी में जोड़ना (यानी, डीआईवी के आसपास मैं उसी लाइन पर चाहता था) काम नहीं किया। (मुझे एहसास है कि यह एक पुराना सवाल है, लेकिन रिट के जवाब ने मुझे कुछ गड़बड़ कर दिया होगा, इसका जवाब 2012 में दिया गया था)। –

मेरे लिए, यह काफी बेहतर काम किया, के रूप में यह नहीं था फ्लोट किए गए आइटमों के बीच अंतर को खत्म नहीं करें:

display:inline-block;

यदि किसी और की सहायता करता है।

स्रोत

2017-11-30 18:45:14

मैं एक ही पंक्ति पर दो divs कैसे रखूं?

उत्तर

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