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下显示的实际宽度
请注意那个提示宽度。 展开
<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下显示的实际宽度
请注意那个提示宽度。 展开
1个回答
展开全部
解决办法,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 没有完善的原因。
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询