在对齐的div

Question

我在垂直设置多个对齐的div内的底部设置div时遇到了麻烦。

    <p>Top of page</p>
 <div id="container">
 <div class="message">area1</div>
 <div class="message">area2</div>
 <div class="message">area3
    <div class="subarea">subarea3</div>
    <div class="subarea">subarea4</div>
</div>
</div>
<p>Bottom of page</p>

CSS

 #container {
height: 1000px;
}

.message {
height: 80%;
width: 30.6%;
float: left;
border:1px solid red ;
vertical-align: top;
background-color: #D4D0C8;
overflow-x: hidden;
padding-bottom: 120px;
}
.subarea{
padding: 5px;
border-bottom: 1px solid #B9A073;
word-wrap: break-word;
width: 99%;
padding-bottom: 5px;
float: left;
}

此处Jsfiddle demo

看起来像是：

但我想这样：

我试过像其他帖子说的那样：

• 将主要div设置为relative，将div设置为绝对值，将底部设置为0，不设置成功。

• 使主div垂直对齐底部并显示表格单元格

有任何帮助吗？

Answer 1

为什么不尝试包装import difflib import csv file1 = "swiss1.csv" file2 = "swiss2.csv" diff = difflib.ndiff(open(file1).readlines(),open(file2).readlines()) f = open('changes.csv','w') for line in diff: if line[0] in ["+", "-"]: f.write(line) f.close() 并将其设为.subarea？

这是代码工作

position: absolute; bottom: 0;

#container {
    height: 1000px;
}

.message {
    position: relative;
    height: 80%;
    width: 30.6%;
    float: left;
    border:1px solid red ;
    vertical-align: top;
    background-color: #D4D0C8;
    overflow-x: hidden;
    padding-bottom: 120px;
}
.subareas{
  position: absolute;
  bottom: 0;
  width: 100%;
}

.subarea{
  padding: 5px;
    border-bottom: 1px solid #B9A073;
    word-wrap: break-word;
    width: 99%;
    padding-bottom: 5px;
    float: left;
}