内容对齐的列使最后一个div与底部对齐？

Question

我有3列内容，我设法通过给列固定高度将最后一个div对齐到底部。是否有更好的方法，因为如果有人改变内容，添加更多文本或更少的文本，这将无法工作。

.column {
    width: 33%;
    float: left;
    background: #ccc;
    height: 350px;
    position: relative;
}
.btn {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    padding: 10px;
}

我的小提琴：Fiddle

Answer 1

Flexbox布局是一个很好的解决方案。

# example for 1 habit with 100 users and a PMF of 5 columns Habit1<-data.frame(col1=abs(rnorm(100)), col2=abs(c(rnorm(20),runif(50),rep(0.4,20),sample(seq(0.01,0.99,by=0.01),10))), col3=abs(c(rnorm(30),runif(30),rep(0.4,10),sample(seq(0.01,0.99,by=0.01),30))), col4=abs(c(rnorm(10),runif(10),rep(0.4,20),sample(seq(0.01,0.99,by=0.01),60))), col5=abs(c(rnorm(50),runif(10),rep(0.4,10),sample(seq(0.01,0.99,by=0.01),30)))) # give all users a username same as rowname rownames(Habit1)<- c(1:100) HellingerDistance <-function(x){ #takes two equal sized vectors and calculates the hellinger distance between the vectors # hellinger distance function return(sqrt(sum(((sqrt(x[1,]) - sqrt(x[2,]))^2)))/sqrt(2)) } HellingerDistanceSqrt <-function(sqrtx){ #takes two equal sized vectors and calculates the hellinger distance between the vectors # hellinger distance function return(sqrt(sum(((sqrtx[1,] - sqrtx[2,])^2)))/sqrt(2)) } calculatedistances <- function(x){ # takes a dataframe of user IID in the first column and a set of N values per user thereafter # first set all NA to 0 x[is.na(x)] <- 0 #create matrix of 2 subsets based on rownumber # 1 first the diagronal with D<-cbind(matrix(rep(1:nrow(x),each=2),nrow=2),combn(1:nrow(x), 2)) # create a dataframe with hellinger distances B <<-data.frame(first=rownames(x)[D[1,]], second=rownames(x)[D[2,]], distance=apply(D, 2, function(y) HellingerDistance(x[ y,])) ) # reshape dataframe into a matrix with users on x and y axis B<<-reshape(B, direction="wide", idvar="second", timevar="first") # convert wide table to distance table object d <<- as.dist(B[,-1], diag = FALSE) attr(d, "Labels") <- B[, 1] return(d) } calculatedistances1 <- function(x){ # takes a dataframe of user IID in the first column and a set of N values per user thereafter # first set all NA to 0 x[is.na(x)] <- 0 x <- sqrt(as.matrix(x)) #create matrix of 2 subsets based on rownumber # 1 first the diagronal with D<-cbind(matrix(rep(1:nrow(x),each=2),nrow=2),combn(1:nrow(x), 2)) # create a dataframe with hellinger distances B <<-data.frame(first=rownames(x)[D[1,]], second=rownames(x)[D[2,]], distance=apply(D, 2, function(y) HellingerDistanceSqrt(x[ y,])) ) # reshape dataframe into a matrix with users on x and y axis B<<-reshape(B, direction="wide", idvar="second", timevar="first") # convert wide table to distance table object d <<- as.dist(B[,-1], diag = FALSE) attr(d, "Labels") <- B[, 1] return(d) } # actual calculation system.time(Result<-calculatedistances(Habit1)) system.time(Result1<-calculatedistances1(Habit1)) identical(Result, Result1) 元素具有行布局（它包含3列），每列都有列布局（显而易见）。在列中，内容增长以填充剩余空间。

我从body类中移除了绝对定位，因此它将占用库中的空间。

＆＃13;

＆＃13;

.btn

＆＃13;

body {
  display: flex;
  flex-direction: row;
}

.column {
  width: 33%;
  float: left;
  background: #ccc;
  min-height: 350px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.content {
  flex-grow: 1;
  padding: 0 5px;
}

.btn {
  text-align: center;
  padding: 10px;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果您需要固定高度的列。

这是代码

.column {
    width: 33%;
    float: left;
    background: #ccc;
    height: 350px;
    position: relative; 
}
.btn {
    text-align: center;
    padding: 10px;
    
}
.content{background:#f5f5f5;height:240px;overflow-x:hidden;overflow-y:auto;}

<div class="column">
       <div class="title">
       <h2>Title 1</h2>
       </div>
       <div class="content">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab?
       </div>
       <div class="btn">Click Me!</div>
   </div>
    
    <div class="column">
       <div class="title">
           <h2>Title 2</h2>
       </div>
       <div class="content">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab?
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab?
       </div>
       <div class="btn">Click Me!</div>
   </div>
    
    <div class="column">
       <div class="title">
           <h2>Title 3</h2>
       </div>
       <div class="content">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab?
       </div>
       <div class="btn">Click Me!</div>
   </div>

否则，如果你想最后div总是低于上面的元素而不是固定的。

这是代码 - ＆gt;

.column {
    width: 33%;
    float: left;
    background: #ccc;
    height: auto;
    position: relative; 
}
.btn {
    text-align: center;
    padding: 10px;
    
}
.content{background:#f5f5f5;}

<div class="column">
       <div class="title">
       <h2>Title 1</h2>
       </div>
       <div class="content">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab?
       </div>
       <div class="btn">Click Me!</div>
   </div>
    
    <div class="column">
       <div class="title">
           <h2>Title 2</h2>
       </div>
       <div class="content">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab?
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab?
       </div>
       <div class="btn">Click Me!</div>
   </div>
    
    <div class="column">
       <div class="title">
           <h2>Title 3</h2>
       </div>
       <div class="content">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab?
       </div>
       <div class="btn">Click Me!</div>
   </div>