html5弹性盒子模型宽度设置问题

代码如下。一个id为container的div包含三个子div,第一个div宽度设置固定200.剩下两个用box-flex属性设置为1;3,为什么最后显示的宽度和预期不一... 代码如下。一个id为container的div包含三个子div,第一个div宽度设置固定200.剩下两个用box-flex属性设置为1;3,为什么最后显示的宽度和预期不一样?col1宽度是200.整个container是600. col2和col3的flex比例是1:3,那么col2应该是(600-200)*1./4应该是100.,同理col3应该是300才对。为什么最后确是164的236?
<div id="container"> <div id="col1">我是第一列的内容</div> <div id="col2">我是第二列的内容<br/>我是第二列的内容<br/>我是第二列的内容<br/>我是第二列的内容<br/>我是第二列的内容<br/></div> <div id="col3">我是第三列的内容</div>*{ margin:0; padding:0;}#container{ width:600px; background: #F93;display:box;display:-moz-box;display:-webkit-box; box-orient:horizontal; -moz-box-orient:horizontal;-webkit-box-orient:horizontal; }#col1{ background: #FCC; width:200px;}#col2{ background:#F63;box-flex:1;-webkit-box-flex:1;-moz-box-flex:1;} #col3{ background:#690;box-flex:3;-webkit-box-flex:3;-moz-box-flex:3;}
下面图片是在chrome下显示的实际宽度

请注意那个提示宽度。
展开
 我来答
iGO2dU
推荐于2017-12-16 · TA获得超过1666个赞
知道小有建树答主
回答量:231
采纳率:0%
帮助的人:160万
展开全部

解决办法,CSS代码修改如下:

#col2{ 
  background:#F63;
  box-flex:1;
  -webkit-box-flex:1;
  -moz-box-flex:1;
  width: 0%;           /* 加上这行代码 */

#col3{ 
  background:#690;
  box-flex:3;
  -webkit-box-flex:3;
  -moz-box-flex:3;
  width: 0%;           /* 加上这行代码 */
}

所有需要按照比例分解的列,都加上 width: 0%; 已经有固定值的列不需要加,原理不懂。

反正这个应该是CSS3新属性  box-orient  没有完善的原因。

推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式