谁能告诉我这里我做错了什么？我希望盒子在divA和divB之间是完全相同的宽度.只是因为divB框在'p2'中的文字略长,不应该改变整个框的宽度.我不想为'p1'使用硬像素宽度,因此它可以灵活地用于视口宽度.我只想让p1盒子总是p2的一半大小,不管内容是多少.有人可以帮助我或建议一个更好的方法??
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div
{
display:-moz-box; /* Firefox */
display:-webkit-box; /* Safari and Chrome */
display:box;
width:100%;
border:1px solid black;
}
#p1
{
-moz-box-flex:1.0; /* Firefox */
-webkit-box-flex:1.0; /* Safari and Chrome */
box-flex:1.0;
text-align:right;
border:1px solid red;
}
#p2
{
-moz-box-flex:2.0; /* Firefox */
-webkit-box-flex:2.0; /* Safari and Chrome */
box-flex:2.0;
text-align:left;
border:1px solid blue;
}
</style>
</head>
<body>
<div id='divA'>
<p id="p1">Hello</p>
<p id="p2">Column 2</p>
</div>
<div id='divB'>
<p id="p1">Hello</p>
<p id="p2">Why is this box larger</p>
</div>
</body>
</html>
Lac*_*hur 24
如果给孩子一个明确的宽度,他们就会表现出来.
flex值将覆盖这些宽度,为您提供所需的布局.这些盒子只需要一个值来开始.如果没有定义的宽度,它们会收缩到其内容的宽度,然后应用flex值.
见这里:http://jsfiddle.net/ZBE7r/
...
#p1, #p2 {
width: 1px;
}
...
它只有在它们都具有相同的显式宽度时才有效(可以是任何值:0,1px,100%等)