/ / कॉलम हमेशा ऊंचाई के बराबर बनाओ? (फाउंडेशन 5) - ज़र्ब-फाउंडेशन

कॉलम हमेशा ऊंचाई के बराबर बनाओ? (फाउंडेशन 5) - ज़र्ब-फाउंडेशन

छवि में दिखाए गए लेआउट को कैसे बनाया जाए? पहला कॉलम बाएं और दूसरा कॉलम दाएं हमेशा एक ही ऊंचाई होना चाहिए, पहली कॉलम ऊंचाई के आधार परफाउंडेशन 5 का उपयोग कर।

यहां छवि विवरण दर्ज करें

उत्तर:

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

फाउंडेशन तुल्यकारक उन्हें भी बना देगा, लेकिन लंबे समय तक आधारित होगा। http://foundation.zurb.com/docs/components/equalizer.html

आप इसे स्वयं ऐसा करने के लिए jQuery का उपयोग कर सकते हैं (यह कई स्तंभों के साथ काम कर सकता है, और आकार के निर्धारण के रूप में किसी भी कॉलम के साथ:

$(document).ready(function() {
sizeRow();

function sizeRow() {
var $col = $(".sizeRow .size-by-me");
var height = $col.height();
$col.siblings(".size-me").height(height);
}
});
.small-6 {
float: left;
width: 50%;
}
.col1 {
height: 400px;
background-color: #F00;
}
.col2 {
height: 200px;
background-color: #FF0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="row sizeRow">
<div class="small-6 columns size-by-me col1">Column 1</div>
<div class="small-6 columns col2 size-me">Column 2</div>
</div>


संबंधित सवाल


टिप्पणियाँ (0)

एक टिप्पणी जोड़े