jquery - 并排的盒子；一种静态宽度，一种可变宽度，底部垂直对齐

Question

我需要在可变宽度容器中并排放置两个盒子。一个盒子有一个定义的宽度，另一个需要填充其余的空间。此外，盒子需要垂直对齐：底部。

CSS
==============
body { background-color: papayawhip; }
.container {
    background-color: white;
    margin: 10px;
    padding: 10px;
}
.box-fixed {
    background-color: lightgray;
    display: inline-block;
    width: 200px;
}
.box-flexible {
    background-color: lightcoral;
    display: inline-block;
    vertical-align: bottom;
    width: 200px; /* <-- Don't want this! */
}

HTML
==============
<div class="container">
  <div class="box-fixed">Lorem ipsum dolor sit amet</div>
  <div class="box-flexible">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</div>
</div>

我可以使用浮动和溢出：隐藏，但是我失去了垂直对齐底部。桌子会很糟糕。

Answer 1

我使用 jquery 管理它：http: //jsfiddle.net/uvvdN/1/

这并不完美，我不得不纯粹因为时间而添加，+ 4但_fixedWidth我希望这是你所追求的。