0

可変幅のコンテナ内に2つのボックスを並べて配置する必要があります。1つのボックスには幅が定義されており、もう1つのボックスは残りのスペースを埋める必要があります。また、ボックスは垂直に配置する必要があります：下部。

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を使用できますが、垂直方向の位置合わせの下部が失われます。そして、テーブルは悪いでしょう。

4

1 に答える 1

0

jquery を使用して管理しました: http://jsfiddle.net/uvvdN/1/

完璧ではありません。純粋に時間の関係で を追加する+ 4必要_fixedWidthがありましたが、これがあなたの求めるものであることを願っています。

于 2012-12-06T16:26:46.407 に答える