※ 引述《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/cn.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