2015-05-08 7 views
5

मैं वर्तमान में केस स्टडीज के लिए एक पृष्ठ बना रहा हूं जिसमें मुख्य बैनर छवि शामिल है जिसके बाद 3 उप छवियों की 3 पंक्तियां हैं। प्रत्येक छवि को background-image संपत्ति के माध्यम से जोड़ा जाता है ताकि divs एक ही ऊंचाई पर रह सकें। Divs में शीर्ष पर एक होवर कंटेनर होता है जिसे मैं हमेशा शीर्ष पर रखना चाहता हूं, लेकिन जब मैं अपने ब्रेक पॉइंट (850 पीएक्स और नीचे) पर जाता हूं तो कंटेनर के शीर्ष पर कवर रखने के लिए, सटीक पिक्सल के बिना यह कठिन होता है। क्या मैं ऐसा करने का एक आसान तरीका है, जो मैं कर रहा हूं?उत्तरदायी और पूर्ण स्थिति के साथ समस्या

यहाँ मूल HTML संरचना मैं

<div class="study-list"> 
<a href="#"> 
    <div class="study-block left"> 
     <div class="left-case-cover"> 
      <div class="case-study-title">A Bridge For Kids Raises Scholarship Funds For Students Using Dxxx's Fundraising Software</div> 
      <div class="case-study-cta">Click here to read more</div> 
     </div> 
     <div class="study study1"></div> 
    </div> 
</a> 
<a href="#"> 
    <div class="study-block center"> 
     <div class="center-case-cover"> 
      <div class="case-study-title">A Bridge For Kids Raises Scholarship Funds For Students Using Dxxx's Fundraising Software</div> 
      <div class="case-study-cta">Click here to read more</div> 
     </div> 
     <div class="study study2"></div> 
    </div> 
</a> 
<a href="#"> 
    <div class="study-block right"> 
     <div class="rightt-case-cover"> 
      <div class="case-study-title">A Bridge For Kids Raises Scholarship Funds For Students Using Dxxx's Fundraising Software</div> 
      <div class="case-study-cta">Click here to read more</div> 
     </div> 
     <div class="study study3"></div> 
    </div> 
</a> 

उपयोग कर रहा हूँ मैं इस तथ्य covers बिल्कुल case-studys से अधिक तैनात किया है कि के कारण लगभग सकारात्मक यह काम नहीं कर रहा हूँ है। क्या इसके बारे में जाने का कोई बेहतर तरीका है, या आप में से कोई भी मुझे यह काम करने में मदद कर सकता है? यह स्क्रीन आकार 851 पीएक्स और उच्चतर के लिए अच्छा लग रहा है, इसे मोबाइल में काम करने के लिए बस एक तरीका जानने की जरूरत है।

मेरी वर्तमान समस्या के Fiddle है, यह इसे पूर्णस्क्रीन में विस्तारित करने में मदद कर सकता है।

सहायता के लिए धन्यवाद!


बातें मैं कोशिश की है:

• मैं कंटेनर कि कवर एक निश्चित चौड़ाई तो रखती है overflow:hidden अतिरिक्त मंडराना को छिपाने के लिए करने की कोशिश की है, लेकिन यह काम नहीं किया है।

• मैंने सटीक पिक्सेल के साथ ऐसा करने की कोशिश की है लेकिन यह भी मुझे असफल रहा है।

उत्तर

0

कवर डीओएम के माता-पिता को position: relative; जोड़ने का प्रयास करें। यह भी सुनिश्चित करें कि कवर top: 0, left: 0 से शुरू होता है और bottom:0 और right:0 के रूप में समाप्त होता है।

आपको लगातार डॉम्स का ओवरलैपिंग सुनिश्चित करने के लिए उचित संरेखण के लिए एक स्पष्ट फ़िक्स करना पड़ सकता है। (< अकेले 850 पीएक्स संकल्प के लिए)। जेनेरिक एचटीएमएल के लिए इसे जोड़ना आपके डेस्कटॉप रिज़ॉल्यूशन को खराब कर सकता है।

+0

मैंने शुक्रवार को कुछ चीजों की कोशिश की थी और पाया कि माता-पिता के सापेक्ष स्थिति जोड़ने से मदद के लिए धन्यवाद! –

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