0

両方のdivのサイズに関係なく、divを別のdiv内に垂直方向に中央揃えしようとしています

私はこれをやっています：

<div id='outer_div'>
    <div id='inner_div'></div>
</div>

CSS:

#outer_div {
   display: table-row; 
   height: 200px; 
   width: 200px
}

#inner_div {
   display: table-cell; 
   vertical-align: middle;
   height: 500px; 
   width: 500px
}

意図的に内側の div のサイズを大きくしています。の幅を入れても、 の幅のために1000pxの幅inner_divが制限されます (これが私が望んでいることです)。200pxouter_div

しかし、高さについては上限ではなく、外側のdivの高さに上限を設定したいと思います。

私が望むのは、CSS で指定した高さに関係なくinner_div、 と同じサイズを維持することです。私は基本的にそれを親と同じサイズにしたい。outer_divouter_div

編集：

これらの div 内にのみテキストを配置します。では、外側の div 200px*200px(それはdisplay: table-row) を持っていて、内側の div は CSS で定義されており、500px*500px内部にダミー テキストがあるとします。私の予想される結果は、内側の div を200px*200px. 幅については外側の div によって正常に「縮小」されますが、高さについてはそうではありません。私が望むのは、高さも縮小することです（したがって、外側のdivの高さを変更すると、内側のdivが自動的に調整されます）

どうすればいいですか？

4

2 に答える 2

0

それはあなたのためにそれをしますか？しかし、あなたの限界を知りません。

HTML:

<div id="container">
  <div id='outer_div'>
      <div id='inner_div'></div>
  </div>
</div>

CSS:

#container
{
   display: block;
   height: 200px;
   width: 200px;
   /* overflow: scroll; */
   overflow: hidden;
   background-color: green;
}

#outer_div {
   display: table-row; 
   height: 200px;
   width: 200px;
   background-color: purple;
}

#inner_div {
   display: table-cell; 
   height: 500px;
   width: 500px;
   background-color: yellow;
}

JSBin で表示

編集: #inner_div を変更できるかどうかはわかりませんが、変更する場合はheight、ルール内を削除するだけです...

于 2012-11-10T01:39:37.270 に答える
0

max-height: value内側の div の高さが「天井」になるように、外側の div の高さに対応する内側の div の CSS に追加するだけです。

于 2012-11-10T01:40:41.983 に答える