Menu
I have html (bootstrap css) like this:
<div class="container">
<div class="row">
<div class="col-xs-6 col">
<div class="block">
<div class="title">
<strong>Dynamic title 1 line</strong>
</div>
<div>
<i>Prop 1</i>
</div>
<div>
Value 1
</div>
</div>
</div>
<div class="col-xs-6 col">
<div class="block">
<div class="title">
<strong>Dynamic title <br>more than 1 line</strong>
</div>
<div>
<i>Prop 1</i>
</div>
<div>
Value 1
</div>
</div>
</div>
</div>
</div>
And css like this
.block{
border: 1px solid black;
margin: 10px;
padding: 10px;
text-align: center;
}
.title{
margin-bottom: 10px;
min-height: 40px;
}
Title comes as dynamic text so it can be 1, 2, or 3 lines. Is there a way to make title height the same height as the height in the 'highest' title with css only. I want properties be aligned regardless of the title text coming in from api. I would like the above example to work without setting min-height: 40px; because I don't know what min-height should be.
http://jsfiddle.net/DTcHh/28125/
203
A complete solution for Bootstrap Equal Height columns with the help of flexbox with only 1 class. This works in all major browsers IE10+. Without this polyfill the columns will behave as usual Bootstrap columns so which is a quite good fallback.
By setting the row to display:table , and the colums to display:table-cell we do indeed get a row of same height columns.
How do you make Li equal to height? Adding class =”frame-height” to all li elements, make all li elements the same height as the highest li element.
The two or more different div of same height can be put side-by-side using CSS. Use CSS property to set the height and width of div and use display property to place div in side-by-side format. The used display property are listed below: display:table; This property is used for elements (div) which behaves like table.
You can use the table.For solving this problem
.block{
margin: 10px;
padding: 10px;
text-align: center;
}
td.block-cell {
border: 1px solid #000;
}
.block-wrap {
background-color: transparent;
border-collapse: separate;
border-spacing: 10px;
}
.title{
margin-bottom: 10px;
min-height: 40px;
}<!DOCTYPE html><head>
<title>Test</title><meta name='viewport' content='width=device-width,initial-scale=1.0,user-scalable=0'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
<table class="block-wrap">
<tr>
<td class="block-cell">
<div class="block">
<div class="title">
<strong>Dynamic title 1 line</strong>
</div>
<div>
<i>Prop 1</i>
</div>
<div>
Value 1
</div>
</div>
</td>
<td class="block-cell" >
<div class="block">
<div class="title">
<strong>Dynamic title <br>more than 1 line</strong>
</div>
<div>
<i>Prop 1</i>
</div>
<div>
Value 1
</div>
</div>
</td>
</tr>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>As far as I am aware this is impossible in css only since the two elements are not siblings of each other. If that was the case display: table-cell could have been an option.
However there is a solution for this when using jQuery you can look up the highest .title element and set all the other .title elements to this heights.
See the following snippet:
var largest = 0;
//loop through all title elements
$(document).find(".title").each(function(){
var findHeight = $(this).height();
if(findHeight > largest){
largest = findHeight;
}
});
$(document).find(".title").css({"height":largest+"px"});
See the fiddle for an example: http://jsfiddle.net/DTcHh/28131/
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
