問題：貼友關於CSS效果的實現

標籤：css

今日在百度貼吧中，一貼有提出如下問題：

對於這個問題，咱們貼上代碼看效果

   1: <html>

   2: <head>

   3:     <meta http-equiv="content-type" content="text/html;charset=utf-8">

   4:     <style type="text/css">

   5:         #div1

   6:         {

   7:             margin: 0 auto;

   8:             width: 300px;

   9:             border: 1px solid black;

  10:         }

  11:         #div2

  12:         {

  13:             margin-top: 10%;

  14:             margin-left: -30px;

  15:             margin-right: -30px;

  16:             margin-bottom: 10%;

  17:             overflow: hidden;

  18:         }

  19:     </style>

  20: </head>

  21: <body>

  22: <div id="div1">

  23:         <div id="div2">

  24:             <img src="bei.jpg" alt="圖片載入失敗">

  25:         </div>

  26: </div>

  27: </body>

  28: </html>

效果：

簡單闡述; 圖片放在子div中，而子div沒有設定高寬，所以img的大小就撐起了子div的大小，margin值是根據父div及來設定的。如果你有其他思路，歡迎交流

來源：http://www.ido321.com/457.html

問題：貼友關於CSS效果的實現