एच 2 इनलाइन इनलाइन-ब्लॉक अजीब ऑफ़सेट

Question

मेरे पास <div> के आसपास है जिसमें कुछ छवियां हैं, <h2> और टेक्स्ट का अनुच्छेद भी है। <a> सभी inline-block हैं। जब भी H2 दो पंक्तियों तक फैलता है तो अगले <a> ऑफ़सेट होता है। नीचे एक स्क्रीनशॉट है।

HTML:

<a href="#"> 
    <div> 
     <div class="imgOverflow"> 
      <img src="/hello/there"> 
     </div> 
     <h2>This is the title</h2> 
     <p>This is a paragraph</p> 
    </div> 

</a> 

सीएसएस:

a { 
    display:inline-block; 
    font-size:16px; 
    border:1px solid grey; 
    width:260px; 
    margin:5px; 
    color:black; 
    overflow: hidden; 
} 
div { 
    display:block; 
    padding:5px; 
    width:250px; 
    height:300px; 
} 
p { 
    font-size:12px; 
    text-align:justify; 
} 
h2 { 
    margin:5px 0 10px 0; 
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif; 
} 
.imgOverflow { 
    margin:-5px 0 0 -5px; 
    width:260px; 
    padding:0; 
    overflow:hidden; 
    height:130px; 
    display:block; 
}  

किसी सीएसएस संपत्ति के कुछ प्रकार यह है कि बेहद मददगार होगा से बचने के लिए जानता है। धन्यवाद।

Answer 1

ऐसा इसलिए है क्योंकि आपका a तत्व लंबवत रूप से नीचे गठबंधन है। चूंकि आपके पास टेक्स्ट की 2 पंक्तियां हैं, इसलिए ऊंचाई बढ़ जाती है और फिट नहीं होती है। इस प्रयास करें:

a { 
display:inline-block; 
font-size:16px; 
border:1px solid grey; 
width:260px; 
margin:5px; 
color:black; 
overflow: hidden; 
vertical-align: top; /* Notice this line */ 
} 

A working example

संपादित

यह संपादन imray के सवाल के बाद आता है।

मैंने एक बार फिर उबंटू 12.04 एलटीएस - क्रोम 33.0.1750.152 में कोड का परीक्षण किया है, लगभग 2 वर्षों के बाद इस प्रश्न का उत्तर दिया गया है, और पता चला है कि - अब - जब आप vertical-align संपत्ति को हटाते हैं तो कोड भी काम करता है । हालांकि, इसके साथ ही यदि आप overflow संपत्ति को हटाते हैं तो आप उस प्रदर्शन को तोड़ देंगे।

ऊंचाई बढ़कर ऊपर, मैं वास्तव में रेखा-ऊंचाई का मतलब था। यह मेरा बुरा है, मैं माफी माफी नहीं हूँ।

अब, निम्नलिखित मामले की कल्पना:

This is our container: 
------------------------------------------------ 
|      Element 2:    | 
| Element 1:  --------------------  | 
| ------------- | Lorem ipsum dolor|  | 
| | Lorem ips | | sit amet   |  | 
| ------------- --------------------  | 
------------------------------------------------ 

मूलभूत मूल्यों element 1 और element 2 पर हैं जब उनके कंटेनर के आधारभूत और इस आधारभूत परिवर्तन करने के लिए गठबंधन किया जाएगा - स्पष्ट रूप से - कंटेनर की ऊंचाई के अनुसार, जो अंत में अपने बच्चों की ऊंचाई से निर्धारित होता है - अगर अन्यथा निर्दिष्ट नहीं किया जाता है।

जाहिर है, लेखन के समय से - अन्य ब्राउज़रों में परीक्षण नहीं - -, लेकिन फिर बस उन्हें संरेखित ब्राउज़रों के सीएसएस कार्यान्वयन के रूप में, जब तक बदलने के लिए vertical-align: bottom को दूर करने और छोड़ने overflow: hidden कोड काम करने के लिए लगता है करते हैं शीर्ष, समस्या को पूरी तरह हल करना चाहिए क्योंकि जब आप शीर्ष पर संरेखित होते हैं, तो अगली पंक्तियों के तत्व लाइन के शीर्ष पर गठबंधन किए जाएंगे।