对齐每个表格单元垂直框

我有1个父表小区.t和2子块.ch1和.ch2：对齐每个表格单元垂直框

HTML：

<div class="t"> 
    <div class="ch1">1</div> 
    <div class="ch2">2</div> 
</div>

CSS：

.t { 
    display: table-cell; 
    background-color:green; 
    height:200px; 
    width:200px; 
} 

.ch1 { 
    background-color:blue; 
    display: block; 
} 

.ch2 { 
    background-color:red; 
    display: block; 
}

是否可以将.ch2推到底，但l在上面EFT .ch1（如果.t使用vertical-align: bottom;这将推动双方块底部）

的jsfiddle： https://jsfiddle.net/hvz4cn69/

来源

2016-02-05 user3479125

Flexbox，就可以做到这一点：

.t { 
 
    display: flex; 
 
    flex-direction: column; 
 
    background-color: green; 
 
    height: 200px; 
 
    width: 200px; 
 
    justify-content: space-between; 
 
} 
 
.ch1 { 
 
    background-color: blue; 
 
    display: block; 
 
} 
 
.ch2 { 
 
    background-color: red; 
 
    display: block; 
 
}

<div class="t"> 
 
    <div class="ch1">1</div> 
 
    <div class="ch2">2</div> 
 
</div>

或者

.t { 
 
    display: flex; 
 
    flex-direction: column; 
 
    background-color: green; 
 
    height: 200px; 
 
    width: 200px; 
 
} 
 
.ch1 { 
 
    background-color: blue; 
 
    display: block; 
 
} 
 
.ch2 { 
 
    background-color: red; 
 
    display: block; 
 
    margin-top: auto; 
 
}

<div class="t"> 
 
    <div class="ch1">1</div> 
 
    <div class="ch2">2</div> 
 
</div>

来源

2016-02-05 09:59:33

谢谢，它的工作原理，并回答问题。但是将table-cell替换为flex会产生一些差异（实际上我有更复杂的情况，但我简化了它，使其更加清晰https://jsfiddle.net/hvz4cn69/1/）。问题是flex本身适合最小高度，table-cell取表中最大table-cell的高度：http://snag.gy/z9xql.jpg。结果我想要http://snag.gy/vV14L.jpg – user3479125

Flexbox也可以做到这一点。 - http://codepen.io/Paulie-D/pen/XXxbzz –

谢谢，它正是它，似乎flex是非常强大的事情，我需要了解它所有关于它 – user3479125

-1

您可以使用margin-top: 164px;为ch2

来源

2016-02-05 10:05:51

对齐每个表格单元垂直框

回答

相关问题