使用CSS将子元素与底部对齐

Question

我有一个表单input，label跨越多行，我希望相应的复选框显示在底部（label元素的最后一行）。

以下是我正在玩的内容

CSS

.standard-form {
    width: 500px;
    border: 1px solid red;
  }


.standard-form .input-row {
  overflow: hidden;
  margin-bottom: 0.8em;
}

.standard-form label {
  width: 25%;
  float: left;
}

.standard-form .input-container {
  width: 70%;
  float: right;
}

  .standard-form .checkbox .input-container {
  display: table-cell;
  height: 100%;
  vertical-align: text-bottom;

}

HTML

<form class="standard-form">
<div class="input-row checkbox" id="permission">
                        <label for="input-permission">
               Do I hereby grant you permission to do whatever tasks are neccessary to achieve an ideal outcome?            </label>
            <div class="input-container">
                <input type="checkbox" id="input-permission" name="permission" value="true" />            </div>

        </div>
  </form>

它也在JSbin上线。

有没有办法做到这一点？我注意到div.input-container没有扩展，这是CSS的旧多列问题。

我以为我可以通过display: table-cell和vertical-align: bottom来解决这个问题，但我还没有做到。我不介意IE6 / 7无法正确呈现它。

我还尝试使用position: relative;和孩子position: absolute; bottom: 0;的组合，除此之外我需要指定一个我无法保证的高度，它将是左侧标签的高度。

Answer 1

查看我的行动更改：http://jsbin.com/ocovu/2/edit

以下是相关声明：

.standard-form .input-row {
  overflow: hidden;
  margin-bottom: 0.8em;
  position: relative;
}
.standard-form .checkbox .input-container {
  position: absolute;
  bottom:-2px;
  left:25%;
}

Answer 2

尝试display: block？