※ 引述《tas72732002 (蔥頭)》之銘言： 想說順便解說一下一些觀念，所以回一篇比較快一點 : 請問一下各位大大, 我在進行瀏覽器的縮放的時候, 原本正常的版型, 就會發生異常 : 正常版型 : ------- ------- : |s1 ||s2 | : | || | : --------------- : ---------------- : |s3 | : ---------------- : 縮小瀏覽器後的版型 : : ------- : |s1 | : | | : ------- : ------- : |s2 | : | | : ------- : ---------------- : |s3 | : ---------------- : 我的html : : <div class="stream-body-content"> : <div> : <!-- 左上 --> : <div class="s1"></div> : <!-- 右上 --> : <div class="s2"></div> : </div> : <!-- 下上 --> : <div class="s3"></div> : </div> : 我的css : : .stream-body-content { width:90%; background-color:black;padding: 1em; } : .s1 { width:70%; } : .s2 { border-style:groove;width:29%;height:420px;margin-bottom:1em; : float:left; } : .s3 { width:99%;height:260px;border:groove;margin-bottom:1em; : float:left;} : 要如何才可以避免我瀏覽器縮放的時候, div不會跑掉呢? 首先是釐清這狀況為何會發生： S1+S2可顯示的區為寬度70%+29%=99%，你有預留1%寬度可供給S2的邊框使用 但視窗縮小之後，S2發生放不進右邊區域的問題，就在於「預留的1%不夠放下邊框」 S2的border-style:groove不會被計算進width的29%之中， 因為預設的容器模型寬度中：「邊框的寬度要另外計算」 border-style:groove預設會產生3px的寬度，在S2的中左右邊框佔了6px 一旦你的顯示stream-body-content可用寬度<600px，就會發生這個問題（裝不下） 因為： 「邊框的6px」 > 「預留空間1% X 可用寬599px」 ================= 以下提供幾個解法： 1.直接解決邊框寬度的方式： a.設定border:none; 把所有邊框都拿掉（如果邊框不重要的話） b.縮小S1和S2百分比，增加預留的空間（不建議此解） c.把width改用px固定寬度設定（如果不需顧及自動縮放） 2.我會採用的作法 inblock：（CSS3 不支援IE8以下） 2-1. 將所有容器模型設定為 box-sizing: border-box; (CSS3專用屬性 文後解釋) 2-2. 把float:left改用 display:inline-block; (避免父容器失去高度) 2-3. 修正inline-block的bug: 將DIV寫在同一行 https://jsfiddle.net/iamstanley/bvo8Lbqd/ 3.2.我會採用的作法 float：（CSS3 不支援IE8以下） 2-1. 所有容器模型設定為 box-sizing: border-box; (CSS3專用屬性 文後解釋) 2-2. S1也設定float:left，stream-body-content的容器新增一個clear_fix的class 2-3. 使用:after產生元素將S2 S3後的float清除，避免父容器失去高度 https://jsfiddle.net/iamstanley/o06t17w4/11/ 為了方便辨識，我加了底色和內容，在參考看看吧。 ===================== 主要是三個重點： 1.box-sizing： 容器模型的寬度標準，會影響容器寬度的計算方式 在這個例子中將所有容器（*）都改用box-sizing: border-box 代表容器的寬度設定會包含了padding以及border的數值 預設的設定為content-box，padding和border都需另外計算 請參閱：http://zh-tw.learnlayout.com/box-sizing.html 2.inline-block：容器模型的表現方式，修正inline-block自動產生的4px空白 http://www.w3cplus.com/css/fighting-the-space-between-inline-block-elements 3.float：浮動元素造成父元素失去高度，一些作法會在HTML中加入新的DIV來清除 我比較推薦用CSS的:after偽元素來做，避免HTML插入太多無謂DIV 這方面相關資訊會比較多，就請自行搜尋了 以上，希望能看得懂 --

※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 125.230.90.6 ※ 文章網址: https://webptt.com/m.aspx?n=bbs/Web_Design/M.1451199900.A.AFD.html ※ 編輯: sjlxup6 (125.230.90.6), 12/27/2015 15:09:30 ※ 編輯: sjlxup6 (125.230.90.6), 12/27/2015 15:15:52