我需要在可变宽度的容器中并排放置两个盒子。一个盒子定义了宽度,另一个盒子需要填充剩余的空间。此外,盒子需要垂直对齐:底部。
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>
我可以使用 floats 和 overflow:hidden,但是我失去了我的垂直对齐底部。 table 会很糟糕。
最佳答案
我使用 jquery 管理它:http://jsfiddle.net/uvvdN/1/
这并不完美,我不得不将 + 4
添加到 _fixedWidth
纯粹是因为时间问题,但我希望这就是您所追求的。
关于jquery - 并排的盒子;一种静态宽度,一种可变宽度,底部垂直对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13747690/