सीएसएस - डिव अन्य डिव

पर बहुत आसान सेट अप नहीं होगा, मैं बस दो divs को साइड-साइड बैठने की कोशिश कर रहा हूं। बाईं ओर छवि, दाईं ओर पाठ। किसी कारण से, यदि पाठ बहुत लंबा है, तो यह div को धक्का देता है। मैं सिर्फ CS-सारांश div समझते हैं कि यह क्रम में नहीं यह कैसा नीचे कूद में पाठ लपेट चाहिए करना चाहते हैं है:सीएसएस - डिव अन्य डिव

http://jsfiddle.net/csaltyj/5Huau/

कोड:

<div class="container"> 
    <div class="cs-image"> 
     <img src="http://www.electroniccampus.org/school_logos/CFNC/Wake_Forest_University/Wake_Forest_University2.jpg" /> 
    </div> 
    <div class="cs-summary"> 
     <p>Texty text text McTexterson likes to text. Why is div getting shoved down?</p> 
    </div> 
</div> 
<div class="container"> 
    <div class="cs-image"> 
     <img src="http://www.electroniccampus.org/school_logos/CFNC/Wake_Forest_University/Wake_Forest_University2.jpg" /> 
    </div> 
    <div class="cs-summary"> 
     <p>Super short text behaves.</p> 
    </div> 
</div>

सीएसएस:

.container { 
    overflow: hidden; 
    border: 2px solid #0f0; 
    width: 400px; 
    margin-bottom: 1em; 
} 

.cs-image { 
    float: left; 
    border: 2px solid red; 
} 

.cs-summary { 
    font-size: 0.8em; 
    border: 2px solid blue; 
    float: left; 
    margin-left: 1em; 
}

आप नीचे दिए गए दूसरे कंटेनर से देख सकते हैं, छोटा पाठ बस ठीक काम करता है। मैं किसी भी पिक्सेल या एम मानों को हार्डकोड नहीं करना चाहता हूं कि टेक्स्ट कितना विस्तृत है, मैं बस इसे अनुरूप बनाना चाहता हूं और इसकी सीमाओं को "जानना" चाहता हूं।

अग्रिम धन्यवाद।

स्रोत

2011-05-05 CaptSaltyJack

अपने div.cs-summary एक सेट width नहीं है, तो यह रूप में ज्यादा स्थान ले जाएगा के रूप में यह

http://jsfiddle.net/hunter/5Huau/7/

.cs-summary { 
    width: 180px; 
    ... 
}

या आप लपेटकर भीतरी div को दूर कर सकता है कर सकते हैं तत्व और बस यह करें:

http://jsfiddle.net/hunter/5Huau/11/

एचटीएमएल

<div class="container"> 
    <img src="http://www.electroniccampus.org/school_logos/CFNC/Wake_Forest_University/Wake_Forest_University2.jpg" /> 
    <p>Texty text text McTexterson likes to text. Why is div getting shoved down?</p>   
</div> 
<div class="container"> 
    <img src="http://www.electroniccampus.org/school_logos/CFNC/Wake_Forest_University/Wake_Forest_University2.jpg" /> 
    <p>Super short text behaves.</p> 
</div>

सीएसएस

.container { 
    overflow: hidden; 
    border: 2px solid #0f0; 
    width: 400px; 
    margin-bottom: 1em; 
} 

.container img { 
    float: left; 
    border: 2px solid red; 
} 

.container p { 
    font-size: 0.8em; 
    border: 2px solid blue; 
    margin-left: 1em; 
}

स्रोत

2011-05-05 17:32:44 hunter

देखें, परेशान क्या है, .container पी बाएं मार्जिन को अनदेखा किया जाता है। क्यूं कर? – CaptSaltyJack

ठीक है, अजीब .. अगर मैं पी को 18 मीटर का मार्जिन-बाएं देता हूं, तो यह इंडेंट करता है। यह पी के बाएं किनारे की तरह img के नीचे है। कुल भ्रम ... – CaptSaltyJack

यदि आप काम करने के लिए मार्जिन-बाएं चाहते हैं तो आपको एक सेट 'चौड़ाई' और 'डिस्प्ले: इनलाइन-ब्लॉक;' की आवश्यकता होगी: http://jsfiddle.net/hunter/5Huau/12/ – hunter

निकालें .cs-summary से float:left ...

और शायद .cs-image पर एक margin-right: 5px या कुछ का उपयोग उन दोनों के बीच एक जगह पाने के लिए।

स्रोत

2011-05-05 17:31:41 Syjin

फ्लोट को हटाने: सीएस-सारांश से छोड़ा गया मार्जिन-बाएं गैर-कार्यात्मक बनाता है। लेकिन फिर मैं सीएस-छवि पर मार्जिन-दाएं डाल सकता हूं और यह काम करता है। इस बारे में निश्चित नहीं है .. मैंने सोचा कि divs के गुच्छे को दाएं से बाएं लाइन पर ले जाना है, उन्हें सभी को बाएं तैरना पड़ा था? – CaptSaltyJack

कैप्टनल्टी जैक - जरूरी नहीं। यह इस बात पर निर्भर करता है कि आप वस्तुओं को कैसे बातचीत करना चाहते हैं। इस लेख को फ्लोट पर देखें: http://www.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/ – Shauna

आप पैडिंग-बाएं संपत्ति का उपयोग कर सकते हैं। – Raze

क्या आपने not using floats at all पर विचार किया है, या क्या आपको 8 से पहले IE के संस्करणों का समर्थन करना है?

.container { 
    border: 2px solid #0f0; 
    width: 400px; 
    padding-bottom: 1em; 
} 

.container > div { 
    display: table-cell; 
    vertical-align: bottom; 
} 
.cs-image { 
    border: 2px solid red; 
} 

.cs-summary { 
    font-size: 0.8em; 
    border: 2px solid blue; 
    padding-left: 1em; 
}

स्रोत

2011-05-05 17:31:56 robertc

फ़्लोट्स आईई 7 में ठीक काम करते हैं। असल में, विचित्र रूप से पर्याप्त, मेरा जेएसफ़ाइल आईई 7 में सही दिखता है लेकिन क्रोम में नहीं। अजीब। – CaptSaltyJack

@CaptSaltyJack वे नहीं करते हैं, अन्यथा वे क्रोम में किए गए आईई 7 में समान दिखेंगे। लेकिन जिस बिंदु को मैं बना रहा था वह यह था कि फ्लोट्स का उपयोग न करना बेहतर है, जिससे आपको आईई 7 का समर्थन नहीं करना पड़ेगा। – robertc

जब बाईं या दाईं जारी (के रूप में अपने उदाहरण से पता चलता), DIV टैग स्वतः उनके भीतर की सामग्री के लिए विस्तार होगा। आप अपनी समस्या को हल करने के लिए दो बातें कर सकते हैं:

div जो एक div टैग और एक पैराग्राफ टैग (<div><p>text here</p></div>) के साथ अपने पाठ रैपिंग की
इसके बजाय अपने पाठ होता है पर एक चौड़ाई को परिभाषित करें, से DIV को दूर अनुच्छेद टैग के आस-पास और अनुच्छेद टैग में float:left जोड़ें। उदाहरण के लिए: <p style="float:left;">text here</p>"

स्रोत

2011-05-05 17:34:50

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

<p>Texty text text McTexterson likes to text. 
    Why is div getting shoved down?<img style="float:left" ... /></p>

स्रोत

2011-05-05 17:42:04 wosis

यहाँ कोड

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 
    <title></title> 
    <style type="text/css"> 
    .container { 
    overflow: hidden; 
    border: 2px solid #0f0; 
    width: 10px; 
    margin-bottom: 1em; 
    width: 400px; 
} 

.cs-image { 
    float: left; 
    border: 2px solid red; 
} 

.cs-summary { 
    font-size: 0.8em; 
    border: 2px solid blue; 
    margin-left: 1em; 
} 
    </style> 
</head> 
<body> 

    <div class="container"> 
    <div class="cs-image"> 
     <img src="http://www.electroniccampus.org/school_logos/CFNC/Wake_Forest_University/Wake_Forest_University2.jpg" /> 
    </div> 
    <div class="cs-summary"> 
     <p>Texty text text McTexterson likes to text. Why is div getting shoved down?</p> 
    </div> 
</div> 
<div class="container"> 
    <div class="cs-image"> 
     <img src="http://www.electroniccampus.org/school_logos/CFNC/Wake_Forest_University/Wake_Forest_University2.jpg" /> 
    </div> 
    <div class="cs-summary"> 
     <p>Super short text behaves.</p> 
    </div> 
</div> 
</body> 
</html>

बस ठीक CS-सारांश से नाव को दूर है।

स्रोत

2011-05-05 17:44:40 NewUser

सीएसएस - डिव अन्य डिव

उत्तर

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