0

私は次のように2つのdivを持っています:

<div id="outer">
     <div id="inner">
     </div>
</div>

内側の div には、固定の height(H) と width(W) があります。最初は、「外側」の div には幅と高さはありません
。また、上と左の値も同じです (同じ原点)。


高さ OH と幅 OWを使用して、同心の「外側」div を作成/配置する (または「外側」div を同心円にする) にはどうすればよいですか?

問題は、W と H (内側の div の幅と高さ) を知っていることです。

寸法 OH と OW (外側の div の幅と高さ) の外側の div が必要です。

編集を追加: CSS の方法ではなく、外側の div の左と上を計算する方法はありますか?

Edit2 : 以前の画像は少し誤解を招くものでした。divは正方形よりも長方形です。したがって、左右のパディングは上下と同じですが、値は異なります。

すなわち。場合によっては、dW が dH と等しくないことがあります。

同心 div

追加されたフィドル

jquery / js ソリューションも探しています。

4

3 に答える 3

4

1) 外側の div をフロートします - これにより、幅がコンテンツの幅に強制されます

2) 外側の div にパディングを追加します

#outer
{
  border: solid 1px red;
  padding: 15px;
  float: left;
}

#inner
{
  width: 300px;
  height: 300px;
  border: solid 1px black;
}

これが実際の例です

于 2013-05-29T12:41:47.940 に答える
1

http://jsfiddle.net/judsonmusic/jvyMF/1/から

* {
    box-sizing: border-box
}  
#outer{

    border:1px solid grey;
    display: inline-block;

}
#inner{

    border:1px solid grey;
    width:100px;
    height:100px;
    float: left;
    margin:50px;

}
于 2013-05-29T12:51:19.063 に答える
0

幅または高さの内側の div 1/2 にマージンを設定する必要があります。これにより、その周囲の div が同心になります。

于 2013-05-29T12:15:25.647 に答える