दो बच्चे divs के संरेखण को ठीक करें

यह परियोजना ट्विटर के समान माइक्रो-ब्लॉगिंग वेबसाइट बनाना है। मैंने साइट चिर्पर का नाम चुना (मुझे कितना चालाक)। प्रत्येक पोस्ट एक पैरेंट div, अवतार div और एक सामग्री div द्वारा संरचित है। अवतार और सामग्री divs इनलाइन प्रदर्शित होते हैं, लेकिन वे ठीक से संरेखित नहीं हैं। किसी भी मदद की सराहना की है।

HTML:

<div class="chirp">
<div class="chirp_avatar_region">
    Avatar
</div>
<div class="chirp_content">
    

USER 2013-11-22 16:43:59

COMMENT

ReChirp!

</div>

The div's aren't aligned how I want them to be (level and 100% of the parent).

I can't post images, so here is a link to an imgur page: http://imgur.com/Mn9mE5q

Relevant CSS:

    body {
    font-family: Verdana, Geneva, sans-serif;
    color: #000;
    background-color: #666;
    font-size: 1em;
}

/* Containers */

div {
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;

    border-style: solid;
    border-width: 3px;
    border-color: #000;

    padding: 10px;
}

div.pane {
    width: 70%;
    background-color: 0099FF;
}

div.chirp {
    border-width: 1px;
    margin-bottom: -1px;
    width: 80%;

    padding: 5px;
}

div.chirp_avatar_region {
    display: inline-block;

    width: 10%;
    height: 100%;

    text-align: center;

    /*border-style: none;*/
}

div.chirp_content {
    display: inline-block;

    width: 80%;
    height: 100%;

    /*border-style: none;*/
}

div.chirp_avatar_region > img, div.chirp_content > p {
    margin-top: 0;
    vertical-align: middle;
}
0

3 उत्तर

पूरी तरह से यकीन नहीं है, लेकिन मुझे लगता है कि क्या हो रहा है यह है कि स्थिति को परिभाषित करके: इनलाइन-ब्लॉक, यह उन्हें एक ही पंक्ति पर डाल रहा है, और लाइन-ऊंचाई को chirp_content कंटेनर की ऊंचाई बना रहा है। वैसे भी एक मायने में। ऊर्ध्वाधर-संरेखण पर सेट करें: शीर्ष; और इसे हल करना चाहिए।

पूर्व।

.chirp_content, .chirp_avatar_region{ vertical-align:top; }

जेएस फ़िल्ड

0
जोड़ा

आप या तो अपने आंतरिक divs फ्लोट कर सकते हैं तो कंटेनर के बाद फ्लोट साफ़ करें

या

लंबवत-संरेखण का उपयोग करें: कंटेनर के शीर्ष पर अपने divs को स्थान देने के लिए शीर्ष

0
जोड़ा
ऊंचाई के लिए आपको पैरेंट कंटेनर के लिए ऊंचाई निर्धारित करने की आवश्यकता है: काम करने के लिए 100%। यह समस्याएं भी पैदा करेगा क्योंकि आपके पास इन divs के लिए पैडिंग सेट है जो 100% की ऊंचाई के साथ संयुक्त है, उन्हें अपने मूल कंटेनर के बाहर धक्का देगा - jsfiddle.net/Jq96K
जोड़ा लेखक timothyclifford, स्रोत
आपका स्वागत है, अगर मदद मिली तो इसे मुक्त करने के लिए स्वतंत्र महसूस करें :)
जोड़ा लेखक timothyclifford, स्रोत

Avatar_region को एक फ्लोट दें: बाएं, और इसकी चौड़ाई हटाएं: और ऊंचाई: सेटिंग। Chirp_content div को हटा दें, यह इनलाइनिंग को रोकता है।

0
जोड़ा
@DrCord अंततः मैंने यह किया। माफ़ कीजिये। :-)
जोड़ा लेखक peterh, स्रोत
यदि आपको ऐसा करना है, तो आपको वास्तव में अपने उत्तर में एक प्लग को अपवोट शामिल नहीं करना चाहिए, शायद इसे एक टिप्पणी में करें ...
जोड़ा लेखक DrCord, स्रोत