0

さまざまな幅の div があります。内部には他に 2 つあり、1 つは固定幅で、もう 1 つは残りの領域を埋めることになっています。しかし、いつも満タンにできるわけではありません。外側のボックスの幅に応じて、小さすぎるか、大きすぎて inner-box-1 を下回ります。inner-box-2 を取得して、outer-box の残りの部分を埋めるにはどうすればよいですか?

http://jsfiddle.net/Y57YP/

HTML

<div id ="outer-box">
   <div id="inner-box-1"></div>
   <div id="inner-box-2"></div>
</div>

CSS

#outer-box{
  width:50%;
  background:#fcc;
  position: relative;
  overflow: auto;
}
#inner-box-1{
  height:50px;
  width:50px;
  background:#ccc;
  float:left;
}
#inner-box-2{
  height:50px;
  width:80%;
  background:#555;
  float:left;
}
4

1 に答える 1

3

これは、簡単ですが完全に直感的ではない奇妙な答えの1つです。floatプロパティと組み合わせてoverflowプロパティを使用して、ブロックフォーマットコンテキストをトリガーする必要があります。

このjsFiddleの例を参照してください。

#inner-box-2{
   height:50px;
   background:#555;
   overflow:auto;
}

私がしたのは、#inner-box-2divから幅とフロートを削除し、overflow:auto

于 2013-02-07T16:11:50.480 に答える