मैंने यह न्यूनतम केस परिदृश्य बनाया है: https://jsfiddle.net/frp61gh7/

एचटीएमएल:

<div class="row">
  <div class="card">
    <h2>card</h2>
    <p>
    some body text. Doesn't really matter. However dit part can have various length. For instance and large image or more text then usual. In that case all other cards should be equally high of that row..
    </p>
    <div class="footer">
    <p>
    this is some kind of footer that should always stick to the bottom
</p>
    </div>
  </div>
  <div class="card">x5...etc</div>
</div>

सीएसएस:

.row{
 display: flex;
 height: 100%;
 flex-wrap: wrap;
}
.card{
  width: 31%;
  border: 1px solid blue;
  margin: 0.5%;
}
.footer{
  border: 1px solid red;
}
p{
  flex-grow: 1;
}

जहां मेरे पास 6 कार्ड हैं जो फ्लेक्सबॉक्स कंटेनर में वैसे ही प्रवाहित होते हैं जैसे मैं चाहता हूं। (नीला बॉर्डर) कार्ड ऊंचाई में बराबर हैं और मेरी इच्छानुसार प्रवाहित होते हैं। प्रति पंक्ति कार्ड की ऊंचाई उस पंक्ति के सबसे ऊंचे कार्ड के लिए भिन्न हो सकती है। वास्तविक जीवन परिदृश्य में यह काम करता है।

हालांकि, प्रत्येक कार्ड का मुख्य भाग इसकी सामग्री के आधार पर उच्च या निम्न हो सकता है (उदाहरण के लिए वास्तविक जीवन परिदृश्य में उत्पाद छवि की चौड़ाई निश्चित है लेकिन ऊंचाई परिवर्तनशील है)। अब प्रश्न/समस्या: क्योंकि शरीर ऊंचाई में लचीला है, मुझे कार्ड के निचले हिस्से में पाद लेख-डिव (लाल सीमा) नहीं मिल रहा है। स्थिति: निरपेक्ष कोई विकल्प नहीं है क्योंकि मैंने यह कोशिश की और यह लचीले शरीर के साथ गड़बड़ हो गया।

कोई सलाह?

0
Vasili Paspalas 30 मार्च 2020, 12:07

2 जवाब

कार्डों को फ्लेक्स-कंटेनर बनाएं और दिशा को कॉलम पर सेट करें और फिर पाद लेख margin-top:auto दें।

यह पाद लेख को प्रत्येक स्तंभ के नीचे धकेलता है।

.row {
  display: flex;
  height: 100%;
  flex-wrap: wrap;
}

.card {
  width: 31%;
  border: 1px solid blue;
  margin: 0.5%;
  display:flex;
  flex-direction: column;
}

.footer {
  border: 1px solid red;
  margin-top: auto;
}

p {
  flex-grow: 1;
}
<div class="row">
  <div class="card">
    <h2>card</h2>
    <p>
      some body text. Doesn't really matter. However dit part can have various length. For instance and large image or more text then usual. In that case all other cards should be equally high of that row..
    </p>
    <div class="footer">
      <p>
        this is some kind of footer that should always stick to the bottom</p>
    </div>
  </div>
  <div class="card">
    <h2>card</h2>
    <p>
      smaller piece of body..
    </p>
    <div class="footer">
      <p>
        this is some kind of footer that should always stick to the bottom</p>
    </div>
  </div>
  <div class="card">
    <h2>card</h2>
    <p>
      And this piece of body will be of medium size. I just have to see how I can fill this with nonsense text. I'm drinking a cup of coffee and working at home because of Corona.
    </p>
    <div class="footer">
      <p>
        this is some kind of footer that should always stick to the bottom</p>
    </div>
  </div>
  <div class="card">
    <h2>card</h2>
    <p>
      some body text. Doesn't really matter. However dit part can have various length. For instance and large image or more text then usual. In that case all other cards should be equally high of that row..
    </p>
    <div class="footer">
      <p>
        this is some kind of footer that should always stick to the bottom</p>
    </div>
  </div>
  <div class="card">
    <h2>card</h2>
    <p>
      smaller piece of body..
    </p>
    <div class="footer">
      <p>
        this is some kind of footer that should always stick to the bottom</p>
    </div>
  </div>
  <div class="card">
    <h2>card</h2>
    <p>
      And this piece of body will be of medium size. I just have to see how I can fill this with nonsense text. I'm drinking a cup of coffee and working at home because of Corona.
    </p>
    <div class="footer">
      <p>
        this is some kind of footer that should always stick to the bottom</p>
    </div>
  </div>
</div>
0
Paulie_D 30 मार्च 2020, 12:42

इसके साथ - साथ

जब तक कोई बेहतर उत्तर नहीं है, तब तक मुझे चीजों को हल करने का एक हैकिश तरीका मिल गया है। दूसरों की मदद कर सकता है और/या यह समझ सकता है कि मैं क्या चाहता हूं कि अंतिम परिणाम कैसा दिखे:

अपने स्वयं के सोल्यूशन में मैंने एक प्लेसहोल्डर (हाँ, अवशेष तकनीकों पर वापस जा रहा है) को पाद लेख के समान ऊंचाई के साथ जोड़ा।

पहेली की पहेली: https://jsfiddle.net/qfo42nh8/

सीएसएस:

.row{
 display: flex;
 height: 100%;
 flex-wrap: wrap;
}
.placeholder{
  height: 100px;
}
.card{
  width: 31%;
  border: 1px solid blue;
  margin: 0.5%;
  position: relative;
}
.footer{
  border: 1px solid red;
  position: absolute;
  bottom: 0;
  height: 100px;
}

एचटीएमएल:

<div class="row">
 <div class="card">
    <h2>card</h2>
    <p>
    piece of body that needs flexible height..
    </p>
    <div class="placeholder">
    </div>
    <div class="footer">
    <p>
    footer content
</p>
    </div>
  </div> <!-- x 5 extra..you get the idea -->
</div>
0
Vasili Paspalas 30 मार्च 2020, 13:05