2

div width:200px; height:200pxこの div は永続的なサイズにする必要がありますが、そうではありません。ユーザーの構成に応じて、両側に 10px または 20px のパディングで再生できる div img の中に入れたいと思います。imgのサイズは200pxよりも大きく、実際にそれです。私の問題は、div をパディングで再生すると、パディングに応じて変更される永続的なサイズにならないことです。divのサイズでパディングを分離したい。助けてくれてありがとう。

私のコード:

<!DOCTYPE html>
<html>
<head>

  <style type='text/css'>
    img{
width:180px;
height:180px;
margin:20px;        
}

.container{
    background-color:orange;
    padding:100px;
    width:200px;
    hieght:200px;
}

</style>
</head>
<body>
<div class="container">
    <img src="http://gfx.glittergraphicsnow.com/albums/ll149/glittergn/flower/flower002.gif" >
</div>
</body>
</html>

デモリンクは次のとおりです。

4

2 に答える 2

4

要素の幅にを含めたい場合は、その要素paddingで使用する必要がありますbox-sizing:border-box;。

コメントで@bskiと@AshwinSinghの回答で言及されているようにoverflow: hidden、オーバーフローしたコンテンツを非表示にするためにも使用する必要があります。

.container{
    background-color:orange;
    padding:100px;
    width:200px;
    height:200px;
    /* add this */
    overflow: hidden;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box
    box-sizing:border-box;
}
于 2012-07-01T11:36:28.883 に答える
1

通常の動作では、固定サイズを指定しても、div はその内部コンテンツのサイズを使用します。内部コンテンツの合計サイズが div のサイズより大きい場合、div はコンテンツを保持するために自動的にサイズ変更されます。div はコンテナーであり、物が含まれていることを覚えておいてください。

すべてのマージンとパディングを含めて、コンテンツを保持するのに十分なサイズに変更するには、width:100%andを使用することをお勧めします。height:100%

その動作を停止し、プロパティを指定する代わりに固定幅を使用する場合overflow:hidden、これにより、div をオーバーフローしているものはすべて非表示になります。プロパティを指定する代わりにスクロールバーが必要なoverflow:scroll場合は、コンテンツがオーバーフローしたときにスクロールバーが表示されます。

UPDATEロジャーキングが指摘したように、あなたはheight:200pxスペルを間違えていましたhieght:200px

于 2012-07-01T11:09:15.673 に答える