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

来老师 2014-09-16

代码如下。一个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下显示的实际宽度

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

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

请注意那个提示宽度。

======================

处理办法:

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#col2
  background:#F63;
  box-flex:1;
  -webkit-box-flex:1;
  -moz-box-flex:1;
  width0%;           /* 加上这行代码 */
#col3
  background:#690;
  box-flex:3;
  -webkit-box-flex:3;
  -moz-box-flex:3;
  width0%;           /* 加上这行代码 */
}

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

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

相关推荐