6
अंतिम पंक्ति वस्तु पूरी चौड़ाई लेती है हालांकि मैं चाहता हूं कि अंतिम पंक्ति वस्तु अन्य सभी वस्तुओं के समान चौड़ाई हो। मैंने अपनी समस्या का वर्णन करने वाला एक स्क्रीनशॉट संलग्न किया है।फ्लेक्स बॉक्स कंटेनर की पूरी चौड़ाई लेते हुए अंतिम आइटम। मैं इसे कैसे हल करूं?
क्या यह फ्लेक्सबॉक्स के साथ व्यवहार्य है या मुझे अपनी आवश्यकता के लिए सरल सीएसएस का उपयोग करना है? या मुझे डिस्प्ले टेबल और टेबल-सेल प्रॉपर्टी का उपयोग करना चाहिए?
अग्रिम धन्यवाद!
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.container {
width: 1170px
}
.listingResult {
list-style: none;
margin: 0px;
padding: 0px;
display: flex;
/* NEW, Spec - Opera 12.1, Firefox 20+ */
display: -webkit-box;
/* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;
/* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;
/* TWEENER - IE 10 */
display: -webkit-flex;
/* NEW - Chrome */
-webkit-flex-wrap: wrap;
/* Safari 6.1+ */
flex-wrap: wrap;
}
.listingResult>li {
width: 33.33%;
-webkit-box-flex: 1 33.33%;
/* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1 .33%;
/* OLD - Firefox 19- */
-webkit-flex: 1 33.33%;
/* Chrome */
-ms-flex: 1 33.33%;
/* IE 10 */
flex: 1 33.33%;
/* NEW, Spec - Opera 12.1, Firefox 20+ */
margin: 0 0 30px;
padding: 10px;
display: flex;
/* NEW, Spec - Opera 12.1, Firefox 20+ */
display: -webkit-box;
/* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;
/* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;
/* TWEENER - IE 10 */
display: -webkit-flex;
/* NEW - Chrome */
-webkit-flex-wrap: wrap;
/* Safari 6.1+ */
flex-wrap: wrap;
}
.listingResult>li .listingResultPic img {
max-width: 100%;
height: auto;
}
.listingResult>li .listingResultInfo {
margin-top: auto;
}<div class="container">
<ul class="listingResult">
<li>
<div class="listingResultPic"><img src="http://rets.906mls.com/mls_photos/1102784_1.JPG" alt="No Image" width=""></div>
<div class="listingResultInfo">
<h4 class="price">$12,000</h4>
<p class="address info">Co Rd AFChampion, MI 49814</p>
<p class="listingNumber info">Listing Number: <a href="http://182.73.133.220/elder/listing-details/1103145">1103145</a></p>
<ul class="basicInfo">
<li class="bed">3</li>
<li class="bath">1</li>
<li class="area">1103 sqft</li>
</ul>
</div>
</li>
<li>
<div class="listingResultPic"><img src="http://rets.906mls.com/mls_photos/1102784_1.JPG" alt="No Image" width=""></div>
<div class="listingResultInfo">
<h4 class="price">$12,500</h4>
<p class="address info">GenevaIronwood, MI 49938</p>
<p class="listingNumber info">Listing Number: <a href="http://182.73.133.220/elder/listing-details/1100143">1100143</a></p>
<ul class="basicInfo">
<li class="bed">3</li>
<li class="bath">2</li>
<li class="area">1717 sqft</li>
</ul>
</div>
</li>
<li>
<div class="listingResultPic"><img src="http://rets.906mls.com/mls_photos/1102784_1.JPG" alt="No Image" width=""></div>
<div class="listingResultInfo">
<h4 class="price">$12,500</h4>
<p class="address info">SaginawNorway, MI 49870</p>
<p class="listingNumber info">Listing Number: <a href="http://182.73.133.220/elder/listing-details/1104097">1104097</a></p>
<ul class="basicInfo">
<li class="bed">3</li>
<li class="bath">1</li>
<li class="area">828 sqft</li>
</ul>
</div>
</li>
<li>
<div class="listingResultPic"><img src="http://rets.906mls.com/mls_photos/1102784_1.JPG" alt="No Image" width=""></div>
<div class="listingResultInfo">
<h4 class="price">$12,900</h4>
<p class="address info">NorthWakefield, MI 49968</p>
<p class="listingNumber info">Listing Number: <a href="http://182.73.133.220/elder/listing-details/1101426">1101426</a></p>
<ul class="basicInfo">
<li class="bed">3</li>
<li class="bath">2</li>
<li class="area">935 sqft</li>
</ul>
</div>
</li>
</ul>
</div>
बहुत बहुत शुक्रिया :) –
आप बहुत स्वागत है !! – Schwesi