2

div2 つの が並んだレイアウトを作成したいと思います。1 つ目divは、そのコンテンツが必要とする幅にする必要があります。2 つ目divは、残りのスペースを埋めるために引き伸ばす必要があります。マークアップは次のようになります。

<div id="d1">
    <div id="d2">fixed width</div>
    <div id="d3">stretching</div>
</div>

問題は、両方divの がコンテンツと同じ幅であり、水平方向のスペース全体を埋めるように伸びないか、(たとえばdisplay: tableond1とdisplay: table-cellond2とを使用する場合d3) 両方divが伸びることです。

残りのスペースを埋めるために幅を固定してd2伸ばすにはどうすればよいですか? d3の幅d2がわからないので、ピクセル単位で指定できないことに注意してください。

4

1 に答える 1

5

私はそれを行うべきだと思います：

#d1 {
  display: table;
  width: 100%;
}

#d2, #d3 {
  display: table-cell;
  padding: 2px 6px;
}

#d2 {
  white-space: nowrap;
}

#d3 {
  width: 100%;
}

ここで試すことができます

于 2013-02-09T22:27:54.200 に答える