Question

我一直试图让这个好几天，但我不能。

我的情况是这样的：我需要三根相同高度的柱子。它们之间需要有边界。左列的内容比其他两列要多一些，另外两列需要在底部有按钮（这些按钮的位置使得它们的底边是左列内容结束的位置）。

这是一张显示我的意思的图片：http://img217.imageshack.us/img217/6400/49593032.png

我已经尝试了巨大的填充底部和同样巨大但负面的边缘底部黑客，它很有效，直到我试图移动按钮。起初我尝试在按钮和位置上使用绝对定位：相对容器，但由于容器需要溢出：隐藏工作按钮将被隐藏并放置在容器的底部（大约32767像素由于巨大的填充物。）

我还尝试使用上面的hack，同时添加第二行，我把按钮放进去。除了它的语义没有多大意义之外，这个方法使得左列的内容没有一路走下去。由于黑客需要溢出：使用负边距来推动第二行的隐藏尝试也没有用。

所以我被困在这里。虚拟列不会帮助我，javascript不是一个选项。你会做什么？

Answer 1

在这种情况下不太喜欢它，但至少有一种解决方案是使用表格。第一列中的文本高度将强制其他单元格的高度，您可以使用单元格内的相对定位（使用div）使按钮位于底部。

[删除代码 - 不是100％确定您的确切要求]

Answer 2

使用A List Apart Holy Grail并绝对定位按钮。

Answer 3

您可以对div使用绝对定位，然后将按钮绝对定位在其中。试试这段代码：

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
  body { height: 100%; margin: 0; }
  .col {
    width: 33%;
    position: absolute;
    top: 0;
    bottom: 0;
    border: 1px solid #000;
    background: blue; 
    position: absolute; 
  }
  .left { left: 0; }
  .mid { left: 33.33%; }
  .right { left: 66.66%; }
  .button { position: absolute; bottom: 0; right: 0; }
</style>
</head>
<body>
<div class="col left">
  sdgfiods ajgodsai jngfio nmsadogf nikod sangf sfdsg fdsg 
</div>
<div class="col mid">
  sdgfiods ajgodsai jngfio nmsadogf nikod sangf sfdsg fdsg 
  <button class="button">click me</button>
</div>
<div class="col right">
  sdgfiods ajgodsai jngfio nmsadogf nikod sangf sfdsg fdsg 
  <button class="button">click me</button>
</div>
</body>
</html>

等高柱，底部带有边框和按钮

3 个答案: