सामग्री फिटिंग div लंबवत - एचटीएमएल, सीएसएस

मैं अपने आप को स्वचालित रूप से करने का सबसे अच्छा तरीका सोच रहा हूंसामग्री लंबवत एक कंटेनर फिट (अधिमानतः सीएसएस का उपयोग कर, लेकिन अन्य सुझावों का स्वागत है)। तो, उदाहरण के लिए, आइटम के बीच बराबर शीर्ष / नीचे अंतर (पैडिंग / मार्जिन) होने के समान (मेरे मामले में, एक <img> एक div के अंदर विभिन्न पाठ टैग के बाद)। लक्ष्य यह होगा कि सामग्री कंटेनर फिट करने के लिए खूबसूरती से फैलती है।

मैं चारों ओर देख रहा हूं लेकिन हेवन को एक सभ्य समाधान नहीं मिला है, या इसके बारे में कोई हालिया प्रश्न नहीं मिला है (हालांकि स्वीकार्य रूप से मैं कठिन दिख सकता था)। धन्यवाद

प्रति लुई अल्मेडा के सुझाव, यहां एक उदाहरण है:

उत्तर:

उत्तर № 1 के लिए 1

मैं (और कई अन्य लोग) फ्लेक्सबॉक्स का समर्थन करेंगे। इसे पढ़ें यहाँ.

दुर्भाग्यवश, फ्लेक्सबॉक्स में वर्तमान में अपने बच्चों को समान रूप से स्थानांतरित करने का कोई तरीका नहीं है। space-between उन्हें जितना संभव हो उतना खाली कर देता है space-around उन्हें जितना संभव हो उतना छोटा स्थान देता है।

बच्चों को भी क्या काम करता है flex-grow: 1, बच्चों को फ्लेक्सबॉक्स भी बनाते हैं और फिर केंद्र में जो भी हो, उसे संरेखित करते हैं।

<div id="container">
<div class="cell">
<div class="stuff">
<h3>asdf</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="cell">
<div class="stuff">
<h3>asdf</h3>
</div>
</div>
<div class="cell">
<div class="stuff">
<h3>asdf</h3>
</div>
</div>
</div>

#container {
background: red;
display: flex;
flex-direction: column;
height: 500px;
}

.cell {
margin: 10px;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
}

.stuff {
background: green;
}

https://jsfiddle.net/w8s4zazk/

---

जवाब के लिए 0 № 2

यहां एक सीएसएस flexbox समाधान है:

एचटीएमएल

<div class="Aligner">
<div class="Aligner-item image-wrapper">inner1</div>
<div class="Aligner-item text-wrapper">inner2</div>
<div class="Aligner-item text-wrapper">inner3</div>
</div>

सीएसएस

.Aligner {
flex-direction: column;
display: flex;
height: 500px;
align-items: center;
justify-content: space-around;
}


.Aligner-item {
display: flex;
border: 1px solid #333;
width: 300px;
justify-content: center;
align-items: center;
}

.image-wrapper{
height: 200px;
}

.text-wrapper{
height: 100px;
}

---

जवाब के लिए 0 № 3

यदि आप ग्रिड का उपयोग करते हैं, तो उपयोग करें समान रूप से अंतरिक्ष चारों ओर अंतरिक्ष और अंतरिक्ष के बीच थोड़ा अलग है। मैं समान रूप से अंतरिक्ष पसंद करते हैं।

---