[英]Child <div> fill remaning height of float <div> left
So in my JSFiddle, I'm trying to make the div.content.groepsfeest
fill up the remaining height so that the bottom aligns properly with the bottom of the left div
. 因此,在我的JSFiddle中,我试图使
div.content.groepsfeest
填充剩余的高度,以使底部与左侧div
的底部正确对齐。
My code: http://jsfiddle.net/Rings/z4tLcvxz/ 我的代码: http : //jsfiddle.net/Rings/z4tLcvxz/
Use display: table-row
and table-cell
使用显示:
table-row
和table-cell
Like: 喜欢:
.events {
display: table-row;
}
.events .left {
width: 50%;
display: table-cell;
}
.events .right {
width: 50%;
display: table-cell;
border: 1px solid #ee3940;
}
http://jsfiddle.net/z4tLcvxz/1/ http://jsfiddle.net/z4tLcvxz/1/
Solution with flex
from Pattle's answer is ok but remember about some browser limitations of this method: 从Pattle的答案中使用
flex
解决方案是可以的,但请记住此方法在浏览器中的一些局限性:
One option that hasn't been mentioned yet is using flexbox. 尚未提及的一种选择是使用flexbox。 You'd need to wrap your columns in a containing
div
with display: flex
on like 您需要使用
display: flex
on like将列包装在包含div
的容器中
.flex-container {
clear: both;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
overflow: hidden;
}
Then give all the columns flex: 1
. 然后将所有列都
flex: 1
。 Here is an example 这是一个例子
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.