網頁中的框中框的位置

曾幾何時,在學習html 的時候,經常想將 div 內的 div 放到指定位置,但總是不成功,如下圖:

外框往往縮到上面,無法框着內裡的框,而我的作法是內框的css定了 float: left; 或 float: right; 外框就唔設定overflow, 我明明html是這樣寫的:

<div id="box1">
   <div id="in_box1"></div>
   <div id="in_box2"></div>
   <div id="in_box3"></div>
</div>

div內div, 但係個外框點解會縮咗上去呢? 以前我的做法是唔要外框,直接將內框定位,但有時真係想加返個框框都無辦法,一路學下學下,睇下睇下,終於知到點做到, 只要在box1的css力加上 overflow: auto; (當然,係唔係auto 就自己決定) 咁就得.

上面例子網頁: https://rohole.com/exercise/box.html (原始碼加咗說明)

＊＊ 本文同時會張貼在rohole.com:  https://rohole.com ＊＊